From b653ac48895dbb0ff3697d85bc053464e7dec8ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Am=C3=A9rico?= Date: Sat, 8 Feb 2020 21:43:06 -0300 Subject: [PATCH 1/3] Add 4bit interlaced with palette example --- test/images/interlaced-pallete-4bit.png | Bin 0 -> 842 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 test/images/interlaced-pallete-4bit.png diff --git a/test/images/interlaced-pallete-4bit.png b/test/images/interlaced-pallete-4bit.png new file mode 100644 index 0000000000000000000000000000000000000000..34e7446b44f0a6c743f200bcaf6cbbefb6fca3e0 GIT binary patch literal 842 zcmV-Q1GW5#P)001Zi0{{R4GY2ZW00001b5ch_0Itp) z=>Px#1ZP1_K>z@;j|==^1poj58&FJCMgRZ*?Ck8*)6=-PxRaBUH8nK=003xcXaE2J zfFS=W00009bW%=J|NsC0|NsC008>wR5&!@I32;bRa{vGi!vFvd!vV){sAK>D0;5Sp zK~y-)l~l`L+CUJVT{h&pQ7YFU53dl!UK4`hs@0}ftukH{s_^f3XJ$i0dg=UhGklrH zH;)a7gk8WV2(O+ePaZJ<*U$)dki90|fJ!DA$CkmbOXd zsmeFY${075Ks_Q%wU#aqz7eFYV}KYF9};p7e_3QAUBRf3D2DN9;?(dNb}vwn-5(b} zEL<6e6Y<$`FJ{CRn1+@^4du5P4Rr4L#r_|9Y2QO&+a6gs5p}=}K8SLQn`u*afUl(7 z5M{BfAmll9Q0gIm7A}wsrM3-WA+?3ZaUt~*b}kKZQ*E)ugGTPvO^e0%fbWP?DBhgq zg4t{V_Ln=dyHhSJav>%r+3pZkF9=UMQyFB%eCkhNi%^ zaj=?^Mz%-1#8$W1ZH+WM%sNZaS6;8QVN`kwdw^K6urayy{cjstT4 zyh;-GU1zSvl0l~jE1h}8%p`(s=D`_Ml-OusVc*!x=T5QLvWc;^N?i^VoHYoT%zYN- z$q^B_Hs#OhqI~SNpG-YpH*;Gxn93bAu%;ym^6B|1qudTx@iA7Pnt@*B@LvM(7f7DA U{Bu{dMF0Q*07*qoM6N<$f&+|%LI3~& literal 0 HcmV?d00001 From ff83f30fc4ea0baebba16ccafbf624ecdf9986c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Am=C3=A9rico?= Date: Sat, 8 Feb 2020 21:44:10 -0300 Subject: [PATCH 2/3] Improve browser example to also load test files --- examples/browser.html | 48 +++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/examples/browser.html b/examples/browser.html index 1c21ffc..51ea687 100644 --- a/examples/browser.html +++ b/examples/browser.html @@ -7,35 +7,53 @@ PNG.js example - + -

PNG.js browser demo

+

PNG.js browser demo

+
- + + + } + + var files = ['ball.png', + 'chompy.png', + 'djay-indexed.png', + 'djay.png', + 'laptop.png', + 'loading.png', + 'spinfox.png', + 'trees.png' + ] + renderButtons('buttons', files, '../images/') + + var testFiles = [ + 'interlaced-grayscale-8bit.png', + 'interlaced-pallete-4bit.png', + 'interlaced-pallete-8bit.png', + 'interlaced-rgb-8bit.png', + 'interlaced-rgb-16bit.png', + 'interlaced-rgb-alpha-8bit.png', + 'transparent-white-palette-8bit.png' + ] + renderButtons('test-buttons', testFiles, '../test/images/') + \ No newline at end of file From d43d962bbddc40cf3b61992167073e47bd4c99c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Am=C3=A9rico?= Date: Sun, 9 Feb 2020 01:11:45 -0300 Subject: [PATCH 3/3] Fix rendering 8bit images with palette --- png.js | 59 +++++++++++++++++++++++++--------------------------------- 1 file changed, 25 insertions(+), 34 deletions(-) diff --git a/png.js b/png.js index 3f381bd..d0ffc12 100644 --- a/png.js +++ b/png.js @@ -406,61 +406,52 @@ window.PNG = (function() { return pixels; } - decodePalette() { - const { palette } = this; - const { length } = palette; - const transparency = this.transparency.indexed || []; - const ret = new Uint8Array((transparency.length || 0) + length); - let pos = 0; - let c = 0; - - for (let i = 0; i < length; i += 3) { - var left; - ret[pos++] = palette[i]; - ret[pos++] = palette[i + 1]; - ret[pos++] = palette[i + 2]; - ret[pos++] = (left = transparency[c++]) != null ? left : 255; - } + _copyToImageDataIndexed(imageData, pixels) { + let j, k; + const alpha = this.transparency.indexed; + const data = imageData.data || imageData; + const { length } = pixels; + const palette = this.palette; + let i = (j = 0); - return ret; + while (i < length) { + k = pixels[i] * 3; + data[j++] = palette[k++]; + data[j++] = palette[k++]; + data[j++] = palette[k++]; + data[j++] = alpha ? alpha[pixels[i]] : 255; + i++; + } } copyToImageData(imageData, pixels) { - let j, k; + let k; let { colors } = this; - let palette = null; let alpha = this.hasAlphaChannel; if (this.palette.length) { - palette = - this._decodedPalette || (this._decodedPalette = this.decodePalette()); - colors = 4; - alpha = true; + this._copyToImageDataIndexed(imageData, pixels); + return; } const data = imageData.data || imageData; const { length } = data; - const input = palette || pixels; - let i = (j = 0); + let i = (k = 0); if (colors === 1) { while (i < length) { - k = palette ? pixels[i / 4] * 4 : j; - const v = input[k++]; + const v = pixels[k++]; data[i++] = v; data[i++] = v; data[i++] = v; - data[i++] = alpha ? input[k++] : 255; - j = k; + data[i++] = alpha ? pixels[k++] : 255; } } else { while (i < length) { - k = palette ? pixels[i / 4] * 4 : j; - data[i++] = input[k++]; - data[i++] = input[k++]; - data[i++] = input[k++]; - data[i++] = alpha ? input[k++] : 255; - j = k; + data[i++] = pixels[k++]; + data[i++] = pixels[k++]; + data[i++] = pixels[k++]; + data[i++] = alpha ? pixels[k++] : 255; } } }