From f0a5bf7add96b3f34f5c9821671eb62d1911e7b6 Mon Sep 17 00:00:00 2001 From: Noitidart Date: Sat, 3 Sep 2016 16:38:04 -0700 Subject: [PATCH 1/3] Support for Web Workers --- png.js | 54 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/png.js b/png.js index 442bba5..ad18883 100644 --- a/png.js +++ b/png.js @@ -3,24 +3,24 @@ /* # MIT LICENSE # Copyright (c) 2011 Devon Govett -# -# Permission is hereby granted, free of charge, to any person obtaining a copy of this -# software and associated documentation files (the "Software"), to deal in the Software -# without restriction, including without limitation the rights to use, copy, modify, merge, -# publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons +# +# Permission is hereby granted, free of charge, to any person obtaining a copy of this +# software and associated documentation files (the "Software"), to deal in the Software +# without restriction, including without limitation the rights to use, copy, modify, merge, +# publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons # to whom the Software is furnished to do so, subject to the following conditions: -# -# The above copyright notice and this permission notice shall be included in all copies or +# +# The above copyright notice and this permission notice shall be included in all copies or # substantial portions of the Software. -# -# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING -# BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, -# DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +# +# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING +# BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +# DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ - +var globalForPNGJS = this; (function() { var PNG; @@ -357,20 +357,22 @@ return ret; }; - scratchCanvas = document.createElement('canvas'); + if (typeof(document) != 'undefined') { + scratchCanvas = document.createElement('canvas'); - scratchCtx = scratchCanvas.getContext('2d'); + scratchCtx = scratchCanvas.getContext('2d'); - makeImage = function(imageData) { - var img; - scratchCtx.width = imageData.width; - scratchCtx.height = imageData.height; - scratchCtx.clearRect(0, 0, imageData.width, imageData.height); - scratchCtx.putImageData(imageData, 0, 0); - img = new Image; - img.src = scratchCanvas.toDataURL(); - return img; - }; + makeImage = function(imageData) { + var img; + scratchCtx.width = imageData.width; + scratchCtx.height = imageData.height; + scratchCtx.clearRect(0, 0, imageData.width, imageData.height); + scratchCtx.putImageData(imageData, 0, 0); + img = new Image; + img.src = scratchCanvas.toDataURL(); + return img; + }; + } PNG.prototype.decodeFrames = function(ctx) { var frame, i, imageData, pixels, _i, _len, _ref, _results; @@ -453,6 +455,6 @@ })(); - window.PNG = PNG; + globalForPNGJS.PNG = PNG; }).call(this); From 30d51876fcfe455f0208d2797066e76b25532cf3 Mon Sep 17 00:00:00 2001 From: Noitidart Date: Sat, 3 Sep 2016 16:44:36 -0700 Subject: [PATCH 2/3] Added to readme how to use second arg callback For browser/webworker - also showed how to get pixel data in browser/webworker --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index 12d72d8..7653cde 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,47 @@ Simply include png.js and zlib.js on your HTML page, create a canvas element, an The source code for the browser version resides in `png.js` and also supports loading and displaying animated PNGs. + +### Without `canvas` +If you use this from Web Workers where there is no `document` and thus no `canvas`, or if you just don't want to use a canvas you can pass a callback to the second argument: + + + + +This will log to console: + +> { +> animation: null, +> bits: 8, +> colorSpace: "DeviceRGB", +> colorType: 6, +> colors: 3, +> compressionMethod: 0, +> data: Uint8Array[9878], +> filterMethod: 0, +> hasAlphaChannel: true, +> height: 64, +> imgData: Uint8Array[7184], +> interlaceMethod: 0, +> palette: Array[0], +> pixelBitlength: 32, +> pos: 9874, +> text: Object, +> transparency: Object, +> width: 64 +> } + +If you want to get the pixel data you can do so like this: + + var imagedata = new ImageData(pnginfo.width, pnginfo.height); + pnginfo.copyToImageData(imagedata, pnginfo.decodePixels()); + ## Node.js Usage Install the module using npm From 891dbc5db72b429d695bb48c1a6d7d342d0f8f16 Mon Sep 17 00:00:00 2001 From: Noitidart Date: Sat, 3 Sep 2016 16:46:22 -0700 Subject: [PATCH 3/3] showed equiavlent in browser/webworker of var pixels --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7653cde..f557cf1 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ If you want to get the pixel data you can do so like this: var imagedata = new ImageData(pnginfo.width, pnginfo.height); pnginfo.copyToImageData(imagedata, pnginfo.decodePixels()); + var pixels = imagedata.data; // pixels is a 1d array (in rgba order) of decoded pixel data ## Node.js Usage Install the module using npm