|
- /*
- * 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
- * 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
- * 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,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
- window.PNG = (function() {
- let APNG_DISPOSE_OP_NONE = 0;
- let APNG_DISPOSE_OP_BACKGROUND = 1;
- let APNG_DISPOSE_OP_PREVIOUS = 2;
- let APNG_BLEND_OP_SOURCE = 0;
- let APNG_BLEND_OP_OVER = 1;
- let scratchCanvas = document.createElement('canvas');
- let scratchCtx = scratchCanvas.getContext('2d');
- let makeImage = function(imageData) {
- scratchCtx.width = imageData.width;
- scratchCtx.height = imageData.height;
- scratchCtx.clearRect(0, 0, imageData.width, imageData.height);
- scratchCtx.putImageData(imageData, 0, 0);
-
- const img = new Image();
- img.src = scratchCanvas.toDataURL();
- return img;
- };
-
- class PNG {
- static load(url, canvas, callback) {
- if (typeof canvas === 'function') {
- callback = canvas;
- }
-
- const xhr = new XMLHttpRequest();
- xhr.open('GET', url, true);
- xhr.responseType = 'arraybuffer';
- xhr.onload = () => {
- const data = new Uint8Array(xhr.response || xhr.mozResponseArrayBuffer);
- const png = new PNG(data);
- if (typeof (canvas && canvas.getContext) === 'function') {
- png.render(canvas);
- }
- return typeof callback === 'function' ? callback(png) : undefined;
- };
-
- return xhr.send(null);
- }
-
- constructor(data1) {
- let i;
- this.data = data1;
- this.pos = 8; // Skip the default header
-
- this.palette = [];
- this.imgData = [];
- this.transparency = {};
- this.animation = null;
- this.text = {};
- let frame = null;
-
- while (true) {
- var data;
- let chunkSize = this.readUInt32();
- let section = '';
- for (i = 0; i < 4; i++) {
- section += String.fromCharCode(this.data[this.pos++]);
- }
-
- switch (section) {
- case 'IHDR':
- // we can grab interesting values from here (like width, height, etc)
- this.width = this.readUInt32();
- this.height = this.readUInt32();
- this.bits = this.data[this.pos++];
- this.colorType = this.data[this.pos++];
- this.compressionMethod = this.data[this.pos++];
- this.filterMethod = this.data[this.pos++];
- this.interlaceMethod = this.data[this.pos++];
- break;
-
- case 'acTL':
- // we have an animated PNG
- this.animation = {
- numFrames: this.readUInt32(),
- numPlays: this.readUInt32() || Infinity,
- frames: []
- };
- break;
-
- case 'PLTE':
- this.palette = this.read(chunkSize);
- break;
-
- case 'fcTL':
- if (frame) {
- this.animation.frames.push(frame);
- }
-
- this.pos += 4; // skip sequence number
- frame = {
- width: this.readUInt32(),
- height: this.readUInt32(),
- xOffset: this.readUInt32(),
- yOffset: this.readUInt32()
- };
-
- var delayNum = this.readUInt16();
- var delayDen = this.readUInt16() || 100;
- frame.delay = (1000 * delayNum) / delayDen;
-
- frame.disposeOp = this.data[this.pos++];
- frame.blendOp = this.data[this.pos++];
- frame.data = [];
- break;
-
- case 'IDAT':
- case 'fdAT':
- if (section === 'fdAT') {
- this.pos += 4; // skip sequence number
- chunkSize -= 4;
- }
-
- data = (frame && frame.data) || this.imgData;
- for (i = 0; i < chunkSize; i++) {
- data.push(this.data[this.pos++]);
- }
- break;
-
- case 'tRNS':
- // This chunk can only occur once and it must occur after the
- // PLTE chunk and before the IDAT chunk.
- this.transparency = {};
- switch (this.colorType) {
- case 3:
- // Indexed color, RGB. Each byte in this chunk is an alpha for
- // the palette index in the PLTE ("palette") chunk up until the
- // last non-opaque entry. Set up an array, stretching over all
- // palette entries which will be 0 (opaque) or 1 (transparent).
- this.transparency.indexed = this.read(chunkSize);
- var short = 255 - this.transparency.indexed.length;
- if (short > 0) {
- for (i = 0; i < short; i++) {
- this.transparency.indexed.push(255);
- }
- }
- break;
- case 0:
- // Greyscale. Corresponding to entries in the PLTE chunk.
- // Grey is two bytes, range 0 .. (2 ^ bit-depth) - 1
- this.transparency.grayscale = this.read(chunkSize)[0];
- break;
- case 2:
- // True color with proper alpha channel.
- this.transparency.rgb = this.read(chunkSize);
- break;
- }
- break;
-
- case 'tEXt':
- var text = this.read(chunkSize);
- var index = text.indexOf(0);
- var key = String.fromCharCode.apply(String, text.slice(0, index));
- this.text[key] = String.fromCharCode.apply(
- String,
- text.slice(index + 1)
- );
- break;
-
- case 'IEND':
- if (frame) {
- this.animation.frames.push(frame);
- }
-
- // we've got everything we need!
- switch (this.colorType) {
- case 0:
- case 3:
- case 4:
- this.colors = 1;
- break;
- case 2:
- case 6:
- this.colors = 3;
- break;
- }
-
- this.hasAlphaChannel = [4, 6].includes(this.colorType);
- var colors = this.colors + (this.hasAlphaChannel ? 1 : 0);
- this.pixelBitlength = this.bits * colors;
-
- switch (this.colors) {
- case 1:
- this.colorSpace = 'DeviceGray';
- break;
- case 3:
- this.colorSpace = 'DeviceRGB';
- break;
- }
-
- this.imgData = new Uint8Array(this.imgData);
- return;
- break;
-
- default:
- // unknown (or unimportant) section, skip it
- this.pos += chunkSize;
- }
-
- this.pos += 4; // Skip the CRC
-
- if (this.pos > this.data.length) {
- throw new Error('Incomplete or corrupt PNG file');
- }
- }
- }
-
- read(bytes) {
- const result = new Array(bytes);
- for (let i = 0; i < bytes; i++) {
- result[i] = this.data[this.pos++];
- }
- return result;
- }
-
- readUInt32() {
- const b1 = this.data[this.pos++] << 24;
- const b2 = this.data[this.pos++] << 16;
- const b3 = this.data[this.pos++] << 8;
- const b4 = this.data[this.pos++];
- return b1 | b2 | b3 | b4;
- }
-
- readUInt16() {
- const b1 = this.data[this.pos++] << 8;
- const b2 = this.data[this.pos++];
- return b1 | b2;
- }
-
- decodePixels(data) {
- if (data == null) {
- data = this.imgData;
- }
- if (data.length === 0) {
- return new Uint8Array(0);
- }
-
- data = new FlateStream(data);
- data = data.getBytes();
-
- const { width, height } = this;
- const pixelBytes = this.pixelBitlength / 8;
-
- const pixels = new Uint8Array(width * height * pixelBytes);
- const { length } = data;
- let pos = 0;
-
- function pass(x0, y0, dx, dy, singlePass = false) {
- const w = Math.ceil((width - x0) / dx);
- const h = Math.ceil((height - y0) / dy);
- const scanlineLength = pixelBytes * w;
- const buffer = singlePass ? pixels : new Uint8Array(scanlineLength * h);
- let row = 0;
- let c = 0;
- while (row < h && pos < length) {
- var byte, col, i, left, upper;
- switch (data[pos++]) {
- case 0: // None
- for (i = 0; i < scanlineLength; i++) {
- buffer[c++] = data[pos++];
- }
- break;
-
- case 1: // Sub
- for (i = 0; i < scanlineLength; i++) {
- byte = data[pos++];
- left = i < pixelBytes ? 0 : buffer[c - pixelBytes];
- buffer[c++] = (byte + left) % 256;
- }
- break;
-
- case 2: // Up
- for (i = 0; i < scanlineLength; i++) {
- byte = data[pos++];
- col = (i - (i % pixelBytes)) / pixelBytes;
- upper =
- row &&
- buffer[
- (row - 1) * scanlineLength +
- col * pixelBytes +
- (i % pixelBytes)
- ];
- buffer[c++] = (upper + byte) % 256;
- }
- break;
-
- case 3: // Average
- for (i = 0; i < scanlineLength; i++) {
- byte = data[pos++];
- col = (i - (i % pixelBytes)) / pixelBytes;
- left = i < pixelBytes ? 0 : buffer[c - pixelBytes];
- upper =
- row &&
- buffer[
- (row - 1) * scanlineLength +
- col * pixelBytes +
- (i % pixelBytes)
- ];
- buffer[c++] = (byte + Math.floor((left + upper) / 2)) % 256;
- }
- break;
-
- case 4: // Paeth
- for (i = 0; i < scanlineLength; i++) {
- var paeth, upperLeft;
- byte = data[pos++];
- col = (i - (i % pixelBytes)) / pixelBytes;
- left = i < pixelBytes ? 0 : buffer[c - pixelBytes];
-
- if (row === 0) {
- upper = upperLeft = 0;
- } else {
- upper =
- buffer[
- (row - 1) * scanlineLength +
- col * pixelBytes +
- (i % pixelBytes)
- ];
- upperLeft =
- col &&
- buffer[
- (row - 1) * scanlineLength +
- (col - 1) * pixelBytes +
- (i % pixelBytes)
- ];
- }
-
- const p = left + upper - upperLeft;
- const pa = Math.abs(p - left);
- const pb = Math.abs(p - upper);
- const pc = Math.abs(p - upperLeft);
-
- if (pa <= pb && pa <= pc) {
- paeth = left;
- } else if (pb <= pc) {
- paeth = upper;
- } else {
- paeth = upperLeft;
- }
-
- buffer[c++] = (byte + paeth) % 256;
- }
- break;
-
- default:
- throw new Error(`Invalid filter algorithm: ${data[pos - 1]}`);
- }
-
- if (!singlePass) {
- let pixelsPos = ((y0 + row * dy) * width + x0) * pixelBytes;
- let bufferPos = row * scanlineLength;
- for (i = 0; i < w; i++) {
- for (let j = 0; j < pixelBytes; j++)
- pixels[pixelsPos++] = buffer[bufferPos++];
- pixelsPos += (dx - 1) * pixelBytes;
- }
- }
-
- row++;
- }
- }
-
- if (this.interlaceMethod === 1) {
- /*
- 1 6 4 6 2 6 4 6
- 7 7 7 7 7 7 7 7
- 5 6 5 6 5 6 5 6
- 7 7 7 7 7 7 7 7
- 3 6 4 6 3 6 4 6
- 7 7 7 7 7 7 7 7
- 5 6 5 6 5 6 5 6
- 7 7 7 7 7 7 7 7
- */
- pass(0, 0, 8, 8); // 1
- pass(4, 0, 8, 8); // 2
- pass(0, 4, 4, 8); // 3
- pass(2, 0, 4, 4); // 4
- pass(0, 2, 2, 4); // 5
- pass(1, 0, 2, 2); // 6
- pass(0, 1, 1, 2); // 7
- } else {
- pass(0, 0, 1, 1, true);
- }
-
- 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;
- }
-
- return ret;
- }
-
- copyToImageData(imageData, pixels) {
- let j, 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;
- }
-
- const data = imageData.data || imageData;
- const { length } = data;
- const input = palette || pixels;
- let i = (j = 0);
-
- if (colors === 1) {
- while (i < length) {
- k = palette ? pixels[i / 4] * 4 : j;
- const v = input[k++];
- data[i++] = v;
- data[i++] = v;
- data[i++] = v;
- data[i++] = alpha ? input[k++] : 255;
- j = k;
- }
- } 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;
- }
- }
- }
-
- decode() {
- const ret = new Uint8Array(this.width * this.height * 4);
- this.copyToImageData(ret, this.decodePixels());
- return ret;
- }
-
- decodeFrames(ctx) {
- if (!this.animation) {
- return;
- }
-
- for (let i = 0; i < this.animation.frames.length; i++) {
- const frame = this.animation.frames[i];
- const imageData = ctx.createImageData(frame.width, frame.height);
- const pixels = this.decodePixels(new Uint8Array(frame.data));
-
- this.copyToImageData(imageData, pixels);
- frame.imageData = imageData;
- frame.image = makeImage(imageData);
- }
- }
-
- renderFrame(ctx, number) {
- const { frames } = this.animation;
- const frame = frames[number];
- const prev = frames[number - 1];
-
- // if we're on the first frame, clear the canvas
- if (number === 0) {
- ctx.clearRect(0, 0, this.width, this.height);
- }
-
- // check the previous frame's dispose operation
- if ((prev && prev.disposeOp) === APNG_DISPOSE_OP_BACKGROUND) {
- ctx.clearRect(prev.xOffset, prev.yOffset, prev.width, prev.height);
- } else if ((prev && prev.disposeOp) === APNG_DISPOSE_OP_PREVIOUS) {
- ctx.putImageData(prev.imageData, prev.xOffset, prev.yOffset);
- }
-
- // APNG_BLEND_OP_SOURCE overwrites the previous data
- if (frame.blendOp === APNG_BLEND_OP_SOURCE) {
- ctx.clearRect(frame.xOffset, frame.yOffset, frame.width, frame.height);
- }
-
- // draw the current frame
- return ctx.drawImage(frame.image, frame.xOffset, frame.yOffset);
- }
-
- animate(ctx) {
- let frameNumber = 0;
- const { numFrames, frames, numPlays } = this.animation;
-
- const doFrame = () => {
- const f = frameNumber++ % numFrames;
- const frame = frames[f];
- this.renderFrame(ctx, f);
-
- if (numFrames > 1 && frameNumber / numFrames < numPlays) {
- this.animation._timeout = setTimeout(doFrame, frame.delay);
- }
- };
-
- doFrame();
- }
-
- stopAnimation() {
- return clearTimeout(this.animation && this.animation._timeout);
- }
-
- render(canvas) {
- // if this canvas was displaying another image before,
- // stop the animation on it
- if (canvas._png) {
- canvas._png.stopAnimation();
- }
-
- canvas._png = this;
- canvas.width = this.width;
- canvas.height = this.height;
- const ctx = canvas.getContext('2d');
-
- if (this.animation) {
- this.decodeFrames(ctx);
- return this.animate(ctx);
- } else {
- const data = ctx.createImageData(this.width, this.height);
- this.copyToImageData(data, this.decodePixels());
- return ctx.putImageData(data, 0, 0);
- }
- }
- }
- return PNG;
- })();
|