Support Pallete-based PNG w. transparency

[hidakatsuya]

Overview

PNG with transparency is not rendered collectly in generated PDF, because Prawn does not support Palleted-PNG with transparency prawnpdf/prawn#783 .

Getting this problem

Sample palleted PNG:

Sample script:

require 'thinreports'

report = Thinreports::Report.new layout: 'palleted-png-test.tlf'
report.start_new_page do |page|
  page.item(:image).src('palleted-png.png')
end
report.generate filename: 'palleted-png-result.pdf'

Sample thinreports-layout-file:

{"version":"0.8.2","config":{"title":"","option":{},"page":{"paper-type":"A4","orientation":"portrait","margin-top":"20","margin-bottom":"20","margin-left":"20","margin-right":"20"}},"svg":"<svg width=\"595.2\" height=\"841.8\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"none\" viewBox=\"0 0 595.2 841.8\"><g class=\"canvas\"><image image-rendering=\"optimizeQuality\" preserveAspectRatio=\"none\" class=\"s-image\" x-display=\"true\" x-id=\"\" id=\"goog_604222137\" x=\"20\" y=\"20\" x-natural-width=\"200\" x-natural-height=\"200\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAD1BMVEX/AAD/AAD/AAD/AAD////Icf73AAAAA3RSTlO/fz8qtTX3AAAAAWJLR0QEj2jZUQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMtJREFUeNrtzwERgEAAw7AH/HtGBr2RKGjPM+J8HWDESJyRGiM1RmqM1BipMVJjpMZIjZEaIzVGaozUGKkxUmOkxkiNkRojNUZqjNQYqTFSszMCAAAAAAAAAAAA/3SNMFJjpMZIjZEaIzVGaozUGKkxUmOkxkiNkRojNUZqjNQYqTFSY6TGSI2RGiM1RmqM1Bip2Rm5RxipMVJjpMZIjZEaIzVGaozUGKkxUmOkxkiNkRojNUZqjNQYqTFSY6TGSI2RGiM1RmqM1MyMvMkE6mEsuD8jAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTEwLTA5VDEwOjM1OjI1KzAyOjAwxhRVNQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMC0wOVQxMDozNToyNSswMjowMLdJ7YkAAAAASUVORK5CYII=\" width=\"200\" height=\"200\"/><!--SHAPE{\"type\":\"s-iblock\",\"id\":\"image\",\"display\":\"true\",\"desc\":null,\"box\":{\"x\":278.2,\"y\":20,\"width\":266.7,\"height\":223.7},\"position-x\":\"left\",\"position-y\":\"top\",\"svg\":{\"tag\":\"image\",\"attrs\":{\"x\":278.2,\"y\":20,\"width\":266.7,\"height\":223.7}}}SHAPE--><!--LAYOUT<g xmlns=\"http://www.w3.org/2000/svg\" class=\"s-iblock\" x-display=\"true\" id=\"goog_604222139\" x-id=\"image\" x-width=\"266.7\" x-height=\"223.7\" x-left=\"278.2\" x-top=\"20\"><rect class=\"s-iblock-box\" stroke=\"none\" fill=\"#0096fd\" fill-opacity=\"0.2\" width=\"266.7\" height=\"223.7\" x=\"278.2\" y=\"20\"/><image width=\"16\" height=\"16\" class=\"s-iblock-mark\" opacity=\"0.5\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"assets/icons/x-image-mark.svg\" display=\"inline\" x=\"403.2\" y=\"123\"/><text class=\"s-iblock-id\" font-size=\"10.5\" font-family=\"Helvetica\" font-weight=\"normal\" font-style=\"normal\" text-decoration=\"none\" text-anchor=\"start\" kerning=\"auto\" stroke=\"none\" fill=\"#0096fd\" fill-opacity=\"1\" x=\"282.2\" y=\"31\">image</text></g>LAYOUT--></g></svg>","state":{"layout-guide":[]}}

Result PDF:

Solution

Automatically convert color-mode of the image to True-color with alpha-channel using ChunkyPNG if an image is pallete-based PNG with transparency when convert_paletted_transparency_png configuration is set true (default is false)

Enabling this feature

This feature is disabled by default. If you want to enable, you need to set true to convert_palleted_transparency_png as below:

Thinreports.config.convert_palleted_transparency_png = true # default false

Note for impact on performance

このオプションを有効にすると、使用されるすべての画像に対して、下記の処理が行われます:

1. PNG なら 2 へ
2. その PNG が Pallete-based PNG w. transparency なら 3 へ
3. その PNG のカラーモードを変換した画像を生成し、キャッシュする

(3) の処理によって一度キャッシュされた画像は、以降上記処理は実行されませんが、それでもこの機能が有効でない状態と比べてパフォーマンスが低下することは避けられません。

画像を多く使用する場合やパフォーマンスがシビアな場合などは、予め画像を変換するなどして、この機能の使用を避けることを検討した方が良いかもしれません。

[hidakatsuya]

@maeda-m Please review 😃

[maeda-m]

@hidakatsuya Good 👍

[hidakatsuya]

@maeda-m ちょっと勉強がてら git rebase -i でコミットを一つにまとめてから merge してみます。http://www.backlog.jp/git-guide/stepup/stepup7_5.html