mirror of
https://github.com/kettek/png-js
synced 2025-03-14 14:34:30 -07:00
Commit of png-js fork
This commit is contained in:
commit
39e8ee8f25
22
LICENSE
Normal file
22
LICENSE
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2017 Devon Govett
|
||||||
|
Copyright (c) 2019 MindFire Games, LLC
|
||||||
|
|
||||||
|
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.
|
44
package.json
Normal file
44
package.json
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"name": "@mindfire/png-js",
|
||||||
|
"description": "A PNG decoder in ES6 JavaScript.",
|
||||||
|
"version": "1.2.0",
|
||||||
|
"main": "dist/png-js.cjs.js",
|
||||||
|
"module": "dist/png-js.es.js",
|
||||||
|
"browser": {
|
||||||
|
"./dist/png-js.es.js": "./dist/png-js.browser.es.js",
|
||||||
|
"./dist/png-js.cjs.js": "./dist/png-js.browser.cjs.js"
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"name": "Mindfire Games, LLC",
|
||||||
|
"email": "founders@mindfire.games",
|
||||||
|
"url": "https://mindfire.games/"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "rollup -c",
|
||||||
|
"prepublish": "npm run build",
|
||||||
|
"test:size": "bundlesize"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-plugin-external-helpers": "^6.22.0",
|
||||||
|
"babel-preset-es2015": "^6.24.1",
|
||||||
|
"bundlesize": "^0.17.0",
|
||||||
|
"rollup": "^0.52.2",
|
||||||
|
"rollup-plugin-babel": "^2.7.1",
|
||||||
|
"rollup-plugin-ignore": "^1.0.3",
|
||||||
|
"rollup-plugin-replace": "^1.1.1",
|
||||||
|
"rollup-plugin-uglify": "^3.0.0"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"bundlesize": [
|
||||||
|
{
|
||||||
|
"path": "./dist/png-js.cjs.min.js",
|
||||||
|
"maxSize": "2kB"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./dist/png-js.browser.cjs.min.js",
|
||||||
|
"maxSize": "2kB"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
82
rollup.config.js
Normal file
82
rollup.config.js
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
import babel from 'rollup-plugin-babel';
|
||||||
|
import uglify from 'rollup-plugin-uglify';
|
||||||
|
import replace from 'rollup-plugin-replace'
|
||||||
|
import ignore from 'rollup-plugin-ignore'
|
||||||
|
|
||||||
|
const cjs = {
|
||||||
|
exports: 'named',
|
||||||
|
format: 'cjs'
|
||||||
|
}
|
||||||
|
|
||||||
|
const esm = {
|
||||||
|
format: 'es'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCJS = override => Object.assign({}, cjs, override)
|
||||||
|
const getESM = override => Object.assign({}, esm, override)
|
||||||
|
|
||||||
|
const configBase = {
|
||||||
|
input: 'src/index.js',
|
||||||
|
plugins: [
|
||||||
|
babel({
|
||||||
|
babelrc: false,
|
||||||
|
presets: [['es2015', { modules: false }]],
|
||||||
|
plugins: ['external-helpers'],
|
||||||
|
runtimeHelpers: true
|
||||||
|
})
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const serverConfig = Object.assign({}, configBase, {
|
||||||
|
output: [
|
||||||
|
getESM({ file: 'dist/png-js.es.js' }),
|
||||||
|
getCJS({ file: 'dist/png-js.cjs.js' }),
|
||||||
|
],
|
||||||
|
plugins: configBase.plugins.concat(
|
||||||
|
replace({
|
||||||
|
BROWSER: JSON.stringify(false),
|
||||||
|
})
|
||||||
|
),
|
||||||
|
external: ['fs']
|
||||||
|
})
|
||||||
|
|
||||||
|
const serverProdConfig = Object.assign({}, serverConfig, {
|
||||||
|
output: [
|
||||||
|
getESM({ file: 'dist/png-js.es.min.js' }),
|
||||||
|
getCJS({ file: 'dist/png-js.cjs.min.js' }),
|
||||||
|
],
|
||||||
|
plugins: serverConfig.plugins.concat(
|
||||||
|
uglify()
|
||||||
|
),
|
||||||
|
})
|
||||||
|
|
||||||
|
const browserConfig = Object.assign({}, configBase, {
|
||||||
|
output: [
|
||||||
|
getESM({ file: 'dist/png-js.browser.es.js' }),
|
||||||
|
getCJS({ file: 'dist/png-js.browser.cjs.js' }),
|
||||||
|
],
|
||||||
|
plugins: configBase.plugins.concat(
|
||||||
|
replace({
|
||||||
|
BROWSER: JSON.stringify(true),
|
||||||
|
"png-js": "png-js/png.js"
|
||||||
|
}),
|
||||||
|
ignore(['fs'])
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const browserProdConfig = Object.assign({}, browserConfig, {
|
||||||
|
output: [
|
||||||
|
getESM({ file: 'dist/png-js.browser.es.min.js' }),
|
||||||
|
getCJS({ file: 'dist/png-js.browser.cjs.min.js' }),
|
||||||
|
],
|
||||||
|
plugins: browserConfig.plugins.concat(
|
||||||
|
uglify()
|
||||||
|
),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default [
|
||||||
|
serverConfig,
|
||||||
|
serverProdConfig,
|
||||||
|
browserConfig,
|
||||||
|
browserProdConfig
|
||||||
|
]
|
320
src/index.js
Normal file
320
src/index.js
Normal file
|
@ -0,0 +1,320 @@
|
||||||
|
import fs from 'fs';
|
||||||
|
import zlib from 'zlib';
|
||||||
|
import range from './range';
|
||||||
|
import { promisify } from 'util';
|
||||||
|
|
||||||
|
const inflateAsync = promisify(zlib.inflate);
|
||||||
|
const readFileAsync = promisify(fs.readFile)
|
||||||
|
|
||||||
|
class IndexedPNG {
|
||||||
|
constructor(data) {
|
||||||
|
this.data = data;
|
||||||
|
this.pos = 8; // Skip the default header
|
||||||
|
|
||||||
|
this.palette = [];
|
||||||
|
this.imgData = [];
|
||||||
|
this.transparency = {};
|
||||||
|
this.text = {};
|
||||||
|
|
||||||
|
this.process()
|
||||||
|
}
|
||||||
|
|
||||||
|
process() {
|
||||||
|
let i;
|
||||||
|
while (true) {
|
||||||
|
var end;
|
||||||
|
const chunkSize = this.readUInt32();
|
||||||
|
const section = ((() => {
|
||||||
|
const result = [];
|
||||||
|
for (i = 0; i < 4; i++) {
|
||||||
|
result.push(String.fromCharCode(this.data[this.pos++]));
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
})()).join('');
|
||||||
|
|
||||||
|
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 'PLTE':
|
||||||
|
this.palette = this.read(chunkSize);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'IDAT':
|
||||||
|
for (i = 0, end = chunkSize; i < end; i++) {
|
||||||
|
this.imgData.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;
|
||||||
|
var short = this.transparency.indexed.length-1;
|
||||||
|
if (short > 0) {
|
||||||
|
var asc,
|
||||||
|
end1;
|
||||||
|
for (
|
||||||
|
i = 0, end1 = short, asc = 0 <= end1; asc
|
||||||
|
? i < end1
|
||||||
|
: i > end1; asc
|
||||||
|
? i++
|
||||||
|
: 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(...Array.from(text.slice(0, index) || []));
|
||||||
|
this.text[key] = String.fromCharCode(...Array.from(text.slice(index + 1) || []));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'IEND':
|
||||||
|
// we've got everything we need!
|
||||||
|
this.colors = (() => {
|
||||||
|
switch (this.colorType) {
|
||||||
|
case 0:
|
||||||
|
case 3:
|
||||||
|
case 4:
|
||||||
|
return 1;
|
||||||
|
case 2:
|
||||||
|
case 6:
|
||||||
|
return 3;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
this.hasAlphaChannel = [4, 6].includes(this.colorType);
|
||||||
|
var colors = this.colors + (
|
||||||
|
this.hasAlphaChannel
|
||||||
|
? 1
|
||||||
|
: 0);
|
||||||
|
this.pixelBitlength = this.bits * colors;
|
||||||
|
|
||||||
|
this.colorSpace = (() => {
|
||||||
|
switch (this.colors) {
|
||||||
|
case 1:
|
||||||
|
return 'DeviceGray';
|
||||||
|
case 3:
|
||||||
|
return 'DeviceRGB';
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
this.imgData = Buffer.from(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 IndexedPNG file");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
read(bytes) {
|
||||||
|
return (range(0, bytes, false).map((i) => this.data[this.pos++]));
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
async decodePixels() {
|
||||||
|
let data
|
||||||
|
try {
|
||||||
|
data = await inflateAsync(this.imgData)
|
||||||
|
} catch (err) {
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
const pixelBytes = this.pixelBitlength / 8;
|
||||||
|
const scanlineLength = pixelBytes * this.width;
|
||||||
|
|
||||||
|
const pixels = Buffer.allocUnsafe(scanlineLength * this.height);
|
||||||
|
const {length} = data;
|
||||||
|
let row = 0;
|
||||||
|
let pos = 0;
|
||||||
|
let c = 0;
|
||||||
|
|
||||||
|
while (pos < length) {
|
||||||
|
var byte,
|
||||||
|
col,
|
||||||
|
i,
|
||||||
|
left,
|
||||||
|
upper;
|
||||||
|
var end;
|
||||||
|
var end1;
|
||||||
|
var end2;
|
||||||
|
var end3;
|
||||||
|
var end4;
|
||||||
|
switch (data[pos++]) {
|
||||||
|
case 0: // None
|
||||||
|
for (i = 0, end = scanlineLength; i < end; i++) {
|
||||||
|
pixels[c++] = data[pos++];
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 1: // Sub
|
||||||
|
for (i = 0, end1 = scanlineLength; i < end1; i++) {
|
||||||
|
byte = data[pos++];
|
||||||
|
left = i < pixelBytes
|
||||||
|
? 0
|
||||||
|
: pixels[c - pixelBytes];
|
||||||
|
pixels[c++] = (byte + left) % 256;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2: // Up
|
||||||
|
for (i = 0, end2 = scanlineLength; i < end2; i++) {
|
||||||
|
byte = data[pos++];
|
||||||
|
col = (i - (i % pixelBytes)) / pixelBytes;
|
||||||
|
upper = row && pixels[((row - 1) * scanlineLength) + (col * pixelBytes) + (i % pixelBytes)];
|
||||||
|
pixels[c++] = (upper + byte) % 256;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3: // Average
|
||||||
|
for (i = 0, end3 = scanlineLength; i < end3; i++) {
|
||||||
|
byte = data[pos++];
|
||||||
|
col = (i - (i % pixelBytes)) / pixelBytes;
|
||||||
|
left = i < pixelBytes
|
||||||
|
? 0
|
||||||
|
: pixels[c - pixelBytes];
|
||||||
|
upper = row && pixels[((row - 1) * scanlineLength) + (col * pixelBytes) + (i % pixelBytes)];
|
||||||
|
pixels[c++] = (byte + Math.floor((left + upper) / 2)) % 256;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 4: // Paeth
|
||||||
|
for (i = 0, end4 = scanlineLength; i < end4; i++) {
|
||||||
|
var paeth,
|
||||||
|
upperLeft;
|
||||||
|
byte = data[pos++];
|
||||||
|
col = (i - (i % pixelBytes)) / pixelBytes;
|
||||||
|
left = i < pixelBytes
|
||||||
|
? 0
|
||||||
|
: pixels[c - pixelBytes];
|
||||||
|
|
||||||
|
if (row === 0) {
|
||||||
|
upper = (upperLeft = 0);
|
||||||
|
} else {
|
||||||
|
upper = pixels[((row - 1) * scanlineLength) + (col * pixelBytes) + (i % pixelBytes)];
|
||||||
|
upperLeft = col && pixels[((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;
|
||||||
|
}
|
||||||
|
|
||||||
|
pixels[c++] = (byte + paeth) % 256;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
throw new Error(`Invalid filter algorithm: ${data[pos - 1]}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
row++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return pixels
|
||||||
|
}
|
||||||
|
|
||||||
|
decodePalette() {
|
||||||
|
const {palette} = this;
|
||||||
|
const transparency = this.transparency.indexed || [];
|
||||||
|
const ret = Buffer.allocUnsafe((palette.length/3) * 4);
|
||||||
|
let pos = 0;
|
||||||
|
const {length} = palette;
|
||||||
|
let c = 0;
|
||||||
|
|
||||||
|
for (let i = 0, end = palette.length; i < end; 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
async toImageData(palette = this.decodePalette()) {
|
||||||
|
if (!this.decodedPixels) {
|
||||||
|
await this.decode()
|
||||||
|
}
|
||||||
|
// Allocate RGBA buffer
|
||||||
|
const pixels = new Uint8ClampedArray(this.decodedPixels.length * 4)
|
||||||
|
let j = 0
|
||||||
|
for (let i = 0; i < this.decodedPixels.length; i++) {
|
||||||
|
let index = this.decodedPixels[i] * 4
|
||||||
|
pixels[j++] = palette[index] // R
|
||||||
|
pixels[j++] = palette[index+1] // G
|
||||||
|
pixels[j++] = palette[index+2] // B
|
||||||
|
pixels[j++] = palette[index+3] // A
|
||||||
|
}
|
||||||
|
return new ImageData(pixels, this.width)
|
||||||
|
}
|
||||||
|
|
||||||
|
async decode() {
|
||||||
|
this.decodedPalette = this.decodePalette()
|
||||||
|
this.decodedPixels = await this.decodePixels()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IndexedPNG;
|
13
src/range.js
Normal file
13
src/range.js
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
const range = (left, right, inclusive) => {
|
||||||
|
let range = [];
|
||||||
|
let ascending = left < right;
|
||||||
|
let end = !inclusive ? right : ascending ? right + 1 : right - 1;
|
||||||
|
|
||||||
|
for (let i = left; ascending ? i < end : i > end; ascending ? i++ : i--) {
|
||||||
|
range.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
return range;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default range;
|
Loading…
Reference in New Issue
Block a user