| // Copyright 2017 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| /** |
| * @fileoverview |
| * 'CrPngBehavior' is a behavior to convert image sequences into animated |
| * PNG images. |
| */ |
| |
| /** |
| * PNG frame delay fraction numerator. |
| * @const |
| */ |
| const PNG_FRAME_DELAY_NUMERATOR = 1; |
| |
| /** |
| * PNG frame delay fraction denominator. |
| * @const |
| */ |
| const PNG_FRAME_DELAY_DENOMINATOR = 20; |
| |
| /** |
| * PNG signature. |
| * @const |
| */ |
| const PNG_SIGNATURE = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]; |
| |
| /** |
| * PNG bit depth (8 = 32bpp). |
| * @const |
| */ |
| const PNG_BIT_DEPTH = 8; |
| |
| /** |
| * PNG compression method (0 = deflate/inflate compression with a sliding |
| * window PNG compression). |
| * @const |
| */ |
| const PNG_COMPRESSION_METHOD = 0; |
| |
| /** |
| * PNG filter method (0 = adaptive filtering with five basic filter types). |
| * @const |
| */ |
| const PNG_FILTER_METHOD = 0; |
| |
| /** |
| * PNG interlace method (0 = no interlace). |
| * @const |
| */ |
| const PNG_INTERLACE_METHOD = 0; |
| |
| /** |
| * CRC table for PNG encode. |
| * |
| * Generated using: |
| * |
| * for (var i = 0; i < 256; i++) { |
| * var value = i; |
| * for (var j = 0; j < 8; j++) { |
| * if (value & 1) |
| * value = ((0xEDB88320) ^ (value >>> 1)); |
| * else |
| * value = (value >>> 1); |
| * } |
| * TABLE[i] = value; |
| * } |
| * |
| * @const |
| */ |
| const PNG_CRC_TABLE = [ |
| 0x0, 0x77073096, 0xEE0E612C, 0x990951BA, 0x76DC419, 0x706AF48F, |
| 0xE963A535, 0x9E6495A3, 0xEDB8832, 0x79DCB8A4, 0xE0D5E91E, 0x97D2D988, |
| 0x9B64C2B, 0x7EB17CBD, 0xE7B82D07, 0x90BF1D91, 0x1DB71064, 0x6AB020F2, |
| 0xF3B97148, 0x84BE41DE, 0x1ADAD47D, 0x6DDDE4EB, 0xF4D4B551, 0x83D385C7, |
| 0x136C9856, 0x646BA8C0, 0xFD62F97A, 0x8A65C9EC, 0x14015C4F, 0x63066CD9, |
| 0xFA0F3D63, 0x8D080DF5, 0x3B6E20C8, 0x4C69105E, 0xD56041E4, 0xA2677172, |
| 0x3C03E4D1, 0x4B04D447, 0xD20D85FD, 0xA50AB56B, 0x35B5A8FA, 0x42B2986C, |
| 0xDBBBC9D6, 0xACBCF940, 0x32D86CE3, 0x45DF5C75, 0xDCD60DCF, 0xABD13D59, |
| 0x26D930AC, 0x51DE003A, 0xC8D75180, 0xBFD06116, 0x21B4F4B5, 0x56B3C423, |
| 0xCFBA9599, 0xB8BDA50F, 0x2802B89E, 0x5F058808, 0xC60CD9B2, 0xB10BE924, |
| 0x2F6F7C87, 0x58684C11, 0xC1611DAB, 0xB6662D3D, 0x76DC4190, 0x1DB7106, |
| 0x98D220BC, 0xEFD5102A, 0x71B18589, 0x6B6B51F, 0x9FBFE4A5, 0xE8B8D433, |
| 0x7807C9A2, 0xF00F934, 0x9609A88E, 0xE10E9818, 0x7F6A0DBB, 0x86D3D2D, |
| 0x91646C97, 0xE6635C01, 0x6B6B51F4, 0x1C6C6162, 0x856530D8, 0xF262004E, |
| 0x6C0695ED, 0x1B01A57B, 0x8208F4C1, 0xF50FC457, 0x65B0D9C6, 0x12B7E950, |
| 0x8BBEB8EA, 0xFCB9887C, 0x62DD1DDF, 0x15DA2D49, 0x8CD37CF3, 0xFBD44C65, |
| 0x4DB26158, 0x3AB551CE, 0xA3BC0074, 0xD4BB30E2, 0x4ADFA541, 0x3DD895D7, |
| 0xA4D1C46D, 0xD3D6F4FB, 0x4369E96A, 0x346ED9FC, 0xAD678846, 0xDA60B8D0, |
| 0x44042D73, 0x33031DE5, 0xAA0A4C5F, 0xDD0D7CC9, 0x5005713C, 0x270241AA, |
| 0xBE0B1010, 0xC90C2086, 0x5768B525, 0x206F85B3, 0xB966D409, 0xCE61E49F, |
| 0x5EDEF90E, 0x29D9C998, 0xB0D09822, 0xC7D7A8B4, 0x59B33D17, 0x2EB40D81, |
| 0xB7BD5C3B, 0xC0BA6CAD, 0xEDB88320, 0x9ABFB3B6, 0x3B6E20C, 0x74B1D29A, |
| 0xEAD54739, 0x9DD277AF, 0x4DB2615, 0x73DC1683, 0xE3630B12, 0x94643B84, |
| 0xD6D6A3E, 0x7A6A5AA8, 0xE40ECF0B, 0x9309FF9D, 0xA00AE27, 0x7D079EB1, |
| 0xF00F9344, 0x8708A3D2, 0x1E01F268, 0x6906C2FE, 0xF762575D, 0x806567CB, |
| 0x196C3671, 0x6E6B06E7, 0xFED41B76, 0x89D32BE0, 0x10DA7A5A, 0x67DD4ACC, |
| 0xF9B9DF6F, 0x8EBEEFF9, 0x17B7BE43, 0x60B08ED5, 0xD6D6A3E8, 0xA1D1937E, |
| 0x38D8C2C4, 0x4FDFF252, 0xD1BB67F1, 0xA6BC5767, 0x3FB506DD, 0x48B2364B, |
| 0xD80D2BDA, 0xAF0A1B4C, 0x36034AF6, 0x41047A60, 0xDF60EFC3, 0xA867DF55, |
| 0x316E8EEF, 0x4669BE79, 0xCB61B38C, 0xBC66831A, 0x256FD2A0, 0x5268E236, |
| 0xCC0C7795, 0xBB0B4703, 0x220216B9, 0x5505262F, 0xC5BA3BBE, 0xB2BD0B28, |
| 0x2BB45A92, 0x5CB36A04, 0xC2D7FFA7, 0xB5D0CF31, 0x2CD99E8B, 0x5BDEAE1D, |
| 0x9B64C2B0, 0xEC63F226, 0x756AA39C, 0x26D930A, 0x9C0906A9, 0xEB0E363F, |
| 0x72076785, 0x5005713, 0x95BF4A82, 0xE2B87A14, 0x7BB12BAE, 0xCB61B38, |
| 0x92D28E9B, 0xE5D5BE0D, 0x7CDCEFB7, 0xBDBDF21, 0x86D3D2D4, 0xF1D4E242, |
| 0x68DDB3F8, 0x1FDA836E, 0x81BE16CD, 0xF6B9265B, 0x6FB077E1, 0x18B74777, |
| 0x88085AE6, 0xFF0F6A70, 0x66063BCA, 0x11010B5C, 0x8F659EFF, 0xF862AE69, |
| 0x616BFFD3, 0x166CCF45, 0xA00AE278, 0xD70DD2EE, 0x4E048354, 0x3903B3C2, |
| 0xA7672661, 0xD06016F7, 0x4969474D, 0x3E6E77DB, 0xAED16A4A, 0xD9D65ADC, |
| 0x40DF0B66, 0x37D83BF0, 0xA9BCAE53, 0xDEBB9EC5, 0x47B2CF7F, 0x30B5FFE9, |
| 0xBDBDF21C, 0xCABAC28A, 0x53B39330, 0x24B4A3A6, 0xBAD03605, 0xCDD70693, |
| 0x54DE5729, 0x23D967BF, 0xB3667A2E, 0xC4614AB8, 0x5D681B02, 0x2A6F2B94, |
| 0xB40BBE37, 0xC30C8EA1, 0x5A05DF1B, 0x2D02EF8D |
| ]; |
| |
| /** |
| * PNG object state. |
| * @typedef {{ |
| * frames: number, |
| * sequences: number, |
| * width: number, |
| * height: number, |
| * colour: number, |
| * chunks: !Array<Uint8Array> |
| * }} |
| */ |
| let CrPngState; |
| |
| /** @polymerBehavior */ |
| const CrPngBehavior = { |
| /** |
| * Returns a data URL for an animated PNG image that is created |
| * from a sequence of images. |
| * @param {!Array<string>} images The data URLs for each image. |
| * @return {string} A data URL for an animated PNG image. |
| */ |
| convertImageSequenceToPng: function(images) { |
| const png = |
| /** @type {!CrPngState} */ ({frames: 0, sequences: 0, chunks: []}); |
| |
| /** Append signature. */ |
| png.chunks.push(new Uint8Array(PNG_SIGNATURE)); |
| |
| /** |
| * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IHDR |
| * |
| * Width 4 bytes |
| * Height 4 bytes |
| * Bit depth 1 byte |
| * Colour type 1 byte |
| * Compression method 1 byte |
| * Filter method 1 byte |
| * Interlace method 1 byte |
| */ |
| const IHDR = new Uint8Array(12 + 13); |
| this.writeUInt32_(IHDR, 13, 0); |
| this.writeFourCC_(IHDR, 'IHDR', 4); |
| /** Write size at the end when known. */ |
| this.writeUInt8_(IHDR, PNG_BIT_DEPTH, 16); |
| /** Write colour at the end when known. */ |
| this.writeUInt8_(IHDR, PNG_COMPRESSION_METHOD, 18); |
| this.writeUInt8_(IHDR, PNG_FILTER_METHOD, 19); |
| this.writeUInt8_(IHDR, PNG_INTERLACE_METHOD, 20); |
| /** Write CRC at the end when size and colour is known. */ |
| png.chunks.push(IHDR); |
| |
| /** |
| * acTL |
| * |
| * Number of frames 4 bytes |
| * Number of times to loop 4 bytes |
| */ |
| const acTL = new Uint8Array(12 + 8); |
| this.writeUInt32_(acTL, 8, 0); |
| this.writeFourCC_(acTL, 'acTL', 4); |
| this.writeUInt32_(acTL, images.length, 8); |
| this.writeUInt32_(acTL, 0, 12); |
| this.writeUInt32_(acTL, this.getCRC_(acTL, 4, 16), 16); |
| png.chunks.push(acTL); |
| |
| /** Append each image as a PNG frame. */ |
| for (let i = 0; i < images.length; ++i) |
| this.appendFrameFromDataURL_(images[i], png); |
| |
| /** Update IHDR now that size and colour is known. */ |
| this.writeUInt32_(IHDR, png.width, 8); |
| this.writeUInt32_(IHDR, png.height, 12); |
| this.writeUInt8_(IHDR, png.colour, 17); |
| this.writeUInt32_(IHDR, this.getCRC_(IHDR, 4, 8 + 13), 8 + 13); |
| |
| /** |
| * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IEND |
| */ |
| const IEND = new Uint8Array(12); |
| this.writeUInt32_(IEND, 0, 0); |
| this.writeFourCC_(IEND, 'IEND', 4); |
| this.writeUInt32_(IEND, this.getCRC_(IEND, 4, 8), 8); |
| png.chunks.push(IEND); |
| |
| return 'data:image/png;base64,' + |
| btoa(png.chunks |
| .map(function(chunk) { |
| return String.fromCharCode.apply(null, chunk); |
| }) |
| .join('')); |
| }, |
| |
| /** |
| * Reads Uint32 from buffer. |
| * @param {!Uint8Array} buffer Buffer to read UInt32 from. |
| * @param {number} offset Offset in buffer to read UInt32 at. |
| * @return {number} The value read. |
| * @private |
| */ |
| readUInt32_: function(buffer, offset) { |
| return (buffer[offset + 0] << 24) + (buffer[offset + 1] << 16) + |
| (buffer[offset + 2] << 8) + (buffer[offset + 3] << 0); |
| }, |
| |
| /** |
| * Reads string from buffer. |
| * @param {!Uint8Array} buffer Buffer to read string from. |
| * @param {number} offset Offset in buffer to read string at. |
| * @param {number} length Length of string to read. |
| * @return {string} The value read. |
| * @private |
| */ |
| readString_: function(buffer, offset, length) { |
| let str = ''; |
| for (let i = 0; i < length; i++) { |
| str += String.fromCharCode(buffer[offset + i]); |
| } |
| return str; |
| }, |
| |
| /** |
| * Write bytes to buffer. |
| * @param {!Uint8Array} buffer Buffer to write bytes to. |
| * @param {!Uint8Array} bytes Array of bytes to be written. |
| * @param {number} offset Offset in buffer to write bytes at. |
| * @private |
| */ |
| writeBytes_: function(buffer, bytes, offset) { |
| for (let i = 0; i < bytes.length; i++) { |
| buffer[offset + i] = bytes[i] & 0xFF; |
| } |
| }, |
| |
| /** |
| * Write UInt8 to buffer. |
| * @param {!Uint8Array} buffer Buffer to write UInt8 to. |
| * @param {number} u8 UInt8 to be written. |
| * @param {number} offset Offset in buffer to write UInt8 at. |
| * @private |
| */ |
| writeUInt8_: function(buffer, u8, offset) { |
| buffer[offset] = u8 & 0xFF; |
| }, |
| |
| /** |
| * Write UInt16 to buffer. |
| * @param {!Uint8Array} buffer Buffer to write UInt16 to. |
| * @param {number} u16 UInt16 to be written. |
| * @param {number} offset Offset in buffer to write UInt16 at. |
| * @private |
| */ |
| writeUInt16_: function(buffer, u16, offset) { |
| buffer[offset + 0] = (u16 >> 8) & 0xFF; |
| buffer[offset + 1] = (u16 >> 0) & 0xFF; |
| }, |
| |
| /** |
| * Write UInt32 to buffer. |
| * @param {!Uint8Array} buffer Buffer to write UInt32 to. |
| * @param {number} u32 UInt32 to be written. |
| * @param {number} offset Offset in buffer to write UInt32 at. |
| * @private |
| */ |
| writeUInt32_: function(buffer, u32, offset) { |
| buffer[offset + 0] = (u32 >> 24) & 0xFF; |
| buffer[offset + 1] = (u32 >> 16) & 0xFF; |
| buffer[offset + 2] = (u32 >> 8) & 0xFF; |
| buffer[offset + 3] = (u32 >> 0) & 0xFF; |
| }, |
| |
| /** |
| * Write string to buffer. |
| * @param {!Uint8Array} buffer Buffer to write string to. |
| * @param {string} string String to be written. |
| * @param {number} offset Offset in buffer to write string at. |
| * @private |
| */ |
| writeString_: function(buffer, string, offset) { |
| for (let i = 0; i < string.length; i++) { |
| buffer[offset + i] = string.charCodeAt(i); |
| } |
| }, |
| |
| /** |
| * Write FourCC code to buffer. |
| * @param {!Uint8Array} buffer Buffer to write FourCC code to. |
| * @param {string} fourcc FourCC code to be written. |
| * @param {number} offset Offset in buffer to write FourCC code at. |
| * @private |
| */ |
| writeFourCC_: function(buffer, fourcc, offset) { |
| buffer[offset + 0] = fourcc.charCodeAt(0); |
| buffer[offset + 1] = fourcc.charCodeAt(1); |
| buffer[offset + 2] = fourcc.charCodeAt(2); |
| buffer[offset + 3] = fourcc.charCodeAt(3); |
| }, |
| |
| /** |
| * Compute CRC from buffer data. |
| * @param {!Uint8Array} buffer Buffer with data to compute CRC from. |
| * @param {number} start Start index in buffer. |
| * @param {number} end End index in buffer. |
| * @return {number} The computed CRC. |
| * @private |
| */ |
| getCRC_: function(buffer, start, end) { |
| let crc = 0xFFFFFFFF; |
| for (let i = start; i < end; i++) { |
| const crcTableIndex = (crc ^ (buffer[i])) & 0xFF; |
| crc = PNG_CRC_TABLE[crcTableIndex] ^ (crc >>> 8); |
| } |
| return crc ^ 0xFFFFFFFF; |
| }, |
| |
| /** |
| * Append frame from data URL to PNG object. |
| * @param {string} dataURL Data URL for frame. |
| * @param {!CrPngState} png PNG object to add frame to. |
| * @private |
| */ |
| appendFrameFromDataURL_: function(dataURL, png) { |
| /** Convert data URL to Uint8Array. */ |
| const byteString = atob(dataURL.split(',')[1]); |
| const bytes = new Uint8Array(byteString.length); |
| this.writeString_(bytes, byteString, 0); |
| |
| /** Check signature. */ |
| const signature = bytes.subarray(0, PNG_SIGNATURE.length); |
| if (signature.toString() != PNG_SIGNATURE.toString()) { |
| console.error('Bad PNG signature'); |
| } |
| |
| /** |
| * fcTL |
| * |
| * Sequence number 4 bytes |
| * Width 4 bytes |
| * Height 4 bytes |
| * X position 4 bytes |
| * Y position 4 bytes |
| * Frame delay numerator 2 bytes |
| * Frame delay denominator 2 bytes |
| * Dispose op 1 bytes |
| * Blend op 1 bytes |
| */ |
| const fcTL = new Uint8Array(12 + 26); |
| this.writeUInt32_(fcTL, 26, 0); |
| this.writeFourCC_(fcTL, 'fcTL', 4); |
| this.writeUInt32_(fcTL, png.sequences, 8); |
| /** Write size at the end when known. */ |
| this.writeUInt32_(fcTL, 0, 20); |
| this.writeUInt32_(fcTL, 0, 24); |
| this.writeUInt16_(fcTL, PNG_FRAME_DELAY_NUMERATOR, 28); |
| this.writeUInt16_(fcTL, PNG_FRAME_DELAY_DENOMINATOR, 30); |
| this.writeUInt8_(fcTL, 0, 32); |
| this.writeUInt8_(fcTL, 0, 33); |
| /** Write CRC at the end when size is known. */ |
| png.sequences += 1; |
| png.chunks.push(fcTL); |
| |
| /** Append data chunks for frame. */ |
| let i = PNG_SIGNATURE.length; |
| while ((i + 12) <= bytes.length) { |
| /** |
| * http://www.w3.org/TR/2003/REC-PNG-20031110/#5Chunk-layout |
| * |
| * length = 4 bytes |
| * type = 4 bytes (IHDR, PLTE, IDAT, IEND or others) |
| * chunk = length bytes |
| * crc = 4 bytes |
| */ |
| const length = this.readUInt32_(bytes, i); |
| const type = this.readString_(bytes, i + 4, 4); |
| const chunk = bytes.subarray(i + 8, i + 8 + length); |
| |
| /** We should have enough bytes left for length. */ |
| if (length != chunk.length) { |
| console.error('Unexpectedly reached end of file'); |
| } |
| |
| switch (type) { |
| case 'IHDR': |
| /** |
| * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IHDR |
| * |
| * Width 4 bytes |
| * Height 4 bytes |
| * Bit depth 1 byte |
| * Colour type 1 byte |
| * Compression method 1 byte |
| * Filter method 1 byte |
| * Interlace method 1 byte |
| */ |
| const width = this.readUInt32_(chunk, 0); |
| const height = this.readUInt32_(chunk, 4); |
| const depth = chunk[8]; |
| const colour = chunk[9]; |
| const compression = chunk[10]; |
| const filter = chunk[11]; |
| const interlace = chunk[12]; |
| |
| /** Initialize size and colour if this is the first frame. */ |
| if (png.frames == 0) { |
| png.width = width; |
| png.height = height; |
| png.colour = colour; |
| } |
| |
| /** Check that header matches our expectations. */ |
| if (width != png.width) |
| console.error('Bad PNG width: ' + width); |
| if (height != png.height) |
| console.error('Bad PNG height: ' + height); |
| if (depth != PNG_BIT_DEPTH) |
| console.error('Bad PNG bit depth: ' + depth); |
| if (colour != png.colour) |
| console.error('Bad PNG colour type: ' + colour); |
| if (compression != PNG_COMPRESSION_METHOD) |
| console.error('Bad PNG compression method: ' + compression); |
| if (filter != PNG_FILTER_METHOD) |
| console.error('Bad PNG filter method: ' + filter); |
| if (interlace != PNG_INTERLACE_METHOD) |
| console.error('Bad PNG interlace method: ' + interlace); |
| break; |
| case 'IDAT': |
| /** Append as IDAT chunk if this is the first frame. */ |
| if (png.frames == 0) { |
| /** |
| * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IDAT |
| * |
| * Data X bytes |
| */ |
| const IDAT = new Uint8Array(12 + length); |
| this.writeUInt32_(IDAT, length, 0); |
| this.writeFourCC_(IDAT, 'IDAT', 4); |
| this.writeBytes_(IDAT, chunk, 8); |
| this.writeUInt32_( |
| IDAT, this.getCRC_(IDAT, 4, 8 + length), 8 + length); |
| png.chunks.push(IDAT); |
| } else { |
| /** |
| * fdAT |
| * |
| * Sequence number 4 bytes |
| * Frame data X bytes |
| */ |
| const fdAT = new Uint8Array(12 + 4 + length); |
| this.writeUInt32_(fdAT, 4 + length, 0); |
| this.writeFourCC_(fdAT, 'fdAT', 4); |
| this.writeUInt32_(fdAT, png.sequences, 8); |
| this.writeBytes_(fdAT, chunk, 12); |
| this.writeUInt32_( |
| fdAT, this.getCRC_(fdAT, 4, 12 + length), 12 + length); |
| png.sequences += 1; |
| png.chunks.push(fdAT); |
| } |
| break; |
| case 'PLTE': |
| /** |
| * https://www.w3.org/TR/2003/REC-PNG-20031110/#11PLTE |
| * |
| * Palette data X bytes |
| */ |
| const PLTE = new Uint8Array(12 + length); |
| this.writeUInt32_(PLTE, length, 0); |
| this.writeFourCC_(PLTE, 'PLTE', 4); |
| this.writeBytes_(PLTE, chunk, 8); |
| this.writeUInt32_( |
| PLTE, this.getCRC_(PLTE, 4, 8 + length), 8 + length); |
| png.chunks.push(PLTE); |
| break; |
| case 'IEND': |
| /** Update fcTL now that size is known. */ |
| this.writeUInt32_(fcTL, png.width, 12); |
| this.writeUInt32_(fcTL, png.height, 16); |
| this.writeUInt32_(fcTL, this.getCRC_(fcTL, 4, 34), 34); |
| png.frames += 1; |
| return; |
| } |
| |
| /** Advance to next chunk. */ |
| i += 12 + length; |
| } |
| console.error('Unexpectedly reached end of file'); |
| }, |
| }; |