This repository has been archived on 2022-01-28. You can view files and clone it, but cannot push or open issues or pull requests.
beebot/imageex.js

296 lines
9 KiB
JavaScript
Raw Normal View History

2018-01-03 14:04:57 +01:00
const _ = require('lodash');
2017-12-31 13:59:14 +01:00
const fs = require('fs');
2017-12-31 01:54:52 +01:00
const got = require('got');
const Canvas = require('canvas');
2017-12-31 13:59:14 +01:00
const streamBuffers = require('stream-buffers');
const mime = require('mime-types');
2017-12-31 01:54:52 +01:00
const { GifReader } = require('omggif');
const GifEncoder = require('gifencoder');
2018-01-07 01:47:43 +01:00
const { createCanvas } = Canvas;
2017-12-31 13:59:14 +01:00
const { Image } = Canvas;
2017-12-31 01:54:52 +01:00
2017-12-31 13:59:14 +01:00
function loadFromUri(uri) {
if (uri.startsWith('http')) {
return got(uri, { encoding: null }).then(res => ({
type: res.headers['content-type'],
data: res.body
}));
}
return new Promise((resolve, reject) => {
fs.readFile(uri, (err, data) => {
if (err) reject(err);
resolve({
type: mime.lookup(uri),
data
});
});
});
2017-12-31 01:54:52 +01:00
}
2018-01-03 14:04:57 +01:00
function _drawImage(ctx, img, x, y, args = {}) {
2018-02-09 15:32:26 +01:00
if (args.transform || args.attributes) {
2018-01-03 14:04:57 +01:00
ctx.save();
2018-02-09 15:32:26 +01:00
if (args.transform) {
_.each(args.transform, (val, prop) => {
2018-02-26 13:23:54 +01:00
console.log(`Transforming ${prop} by ${val}`);
2018-02-09 15:32:26 +01:00
ctx[prop](...val);
});
}
if (args.attributes) {
_.each(args.attributes, (val, prop) => {
console.log(`Setting ${prop} to ${val}`);
2018-02-09 15:32:26 +01:00
ctx[prop] = val;
});
}
2018-01-03 14:04:57 +01:00
}
if (args.sx !== undefined || args.sy !== undefined || args.swidth !== undefined || args.sheight !== undefined) {
ctx.drawImage(img, args.sx, args.sy, args.swidth, args.sheight, x, y, args.width || args.swidth, args.height || args.sheight);
} else {
ctx.drawImage(img, x, y, args.width, args.height);
}
2018-02-09 15:32:26 +01:00
if (args.transform || args.attributes) {
2018-01-03 14:04:57 +01:00
ctx.restore();
}
}
2017-12-31 01:54:52 +01:00
class ImageEx {
2017-12-31 13:59:14 +01:00
constructor(uri) {
this.uri = uri;
this.frames = null;
2017-12-31 13:59:14 +01:00
this.loaded = loadFromUri(uri).then(result => {
2017-12-31 01:54:52 +01:00
this.type = result.type;
this.data = result.data;
if (this.type === 'image/gif') {
2017-12-31 13:59:14 +01:00
console.log(uri, 'loaded');
this.initGif();
} else {
this.initStatic();
2017-12-31 01:54:52 +01:00
}
2017-12-31 13:59:14 +01:00
return this;
2017-12-31 01:54:52 +01:00
});
}
initGif() {
const reader = new GifReader(new Uint8Array(this.data));
this.width = reader.width;
this.height = reader.height;
console.log('Decoding frames');
2017-12-31 01:54:52 +01:00
this.frames = this.decodeFrames(reader);
console.log('Frames decoded!');
2017-12-31 01:54:52 +01:00
this.renderAllFrames();
2017-12-31 13:59:14 +01:00
return this;
2017-12-31 01:54:52 +01:00
}
initStatic() {
const img = new Image();
img.src = this.data;
2017-12-31 13:59:14 +01:00
this.width = img.width;
this.height = img.height;
const canvas = createCanvas(this.width, this.height);
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
2017-12-31 13:59:14 +01:00
this.frames = [{
actualOffset: 0,
actualDelay: Infinity,
delay: Infinity,
canvas
2017-12-31 13:59:14 +01:00
}];
2017-12-31 01:54:52 +01:00
}
decodeFrames(reader) {
const frames = [];
let offset = 0;
for (let i = 0; i < reader.numFrames(); ++i) {
const frameInfo = reader.frameInfo(i);
frameInfo.pixels = new Uint8ClampedArray(reader.width * reader.height * 4);
reader.decodeAndBlitFrameRGBA(i, frameInfo.pixels);
frameInfo.buffer = this.createBufferCanvas(frameInfo, this.width, this.height);
frameInfo.actualOffset = offset;
frameInfo.actualDelay = Math.max(frameInfo.delay * 10, 20);
offset += frameInfo.actualDelay;
frames.push(frameInfo);
}
this.totalDuration = offset;
return frames;
}
renderAllFrames() {
let disposeFrame = null;
const canvas = createCanvas(this.width, this.height);
const ctx = canvas.getContext('2d');
let saved;
for (let i = 0; i < this.frames.length; ++i) {
const frame = this.frames[i];
console.log('Rendering frame', frame);
2017-12-31 01:54:52 +01:00
if (typeof disposeFrame === 'function') disposeFrame();
switch (frame.disposal) {
case 2:
disposeFrame = () => ctx.clearRect(0, 0, canvas.width, canvas.height);
break;
case 3:
saved = ctx.getImageData(0, 0, canvas.width, canvas.height);
disposeFrame = () => ctx.putImageData(saved, 0, 0); // eslint-disable-line no-loop-func
break;
default:
this.disposeFrame = null;
}
// draw current frame
ctx.drawImage(frame.buffer, frame.x, frame.y);
const frameCanvas = createCanvas(this.width, this.height);
const frameCtx = frameCanvas.getContext('2d');
frameCtx.drawImage(canvas, 0, 0);
frame.canvas = frameCanvas;
2017-12-31 01:54:52 +01:00
}
}
createBufferCanvas(frame, width, height) {
const canvas = createCanvas(frame.width, frame.height);
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(width, height);
imageData.data.set(frame.pixels);
ctx.putImageData(imageData, -frame.x, -frame.y);
return canvas;
}
drawFrame(ctx, frameNum, x, y, args = {}) {
_drawImage(ctx, this.frames[frameNum].canvas, x, y, args);
2017-12-31 01:54:52 +01:00
}
}
class CanvasEx {
constructor(width, height) {
2018-01-03 14:04:57 +01:00
this.width = Math.round(width);
this.height = Math.round(height);
2017-12-31 01:54:52 +01:00
this.frames = [];
this.totalDuration = Infinity;
}
2018-01-07 02:09:44 +01:00
setDelay(frame, actualDelay, delay) {
if (!Number.isFinite(this.totalDuration)) this.totalDuration = 0;
else if (Number.isFinite(frame.actualDelay)) this.totalDuration -= frame.actualDelay || 0;
2017-12-31 01:54:52 +01:00
if ((actualDelay === undefined || actualDelay === null)
2017-12-31 13:59:14 +01:00
&& (delay === undefined || delay === null)) throw new Error('Delay has to be set!');
if (!Number.isNaN(delay) && delay <= 1) {
delay = 10;
}
2018-01-07 02:09:44 +01:00
frame.delay = delay || Math.max(Math.round(actualDelay / 10), 2);
frame.actualDelay = actualDelay || Math.max(delay * 10, 20);
this.totalDuration += frame.actualDelay;
}
2018-01-07 02:09:44 +01:00
addFrame(actualDelay, delay) {
const canvas = createCanvas(this.width, this.height);
2017-12-31 01:54:52 +01:00
const frame = {
actualOffset: this.totalDuration,
canvas,
ctx: canvas.getContext('2d')
};
2018-01-07 02:09:44 +01:00
this.setDelay(frame, actualDelay, delay);
this.totalDuration += frame.actualDelay;
2017-12-31 01:54:52 +01:00
this.frames.push(frame);
}
drawImage(img, x, y, args = {}) {
if (img.frames && img.frames.length > 1) {
if (this.frames.length > 1) throw new Error('Cannot render animations onto animated canvases!');
2018-01-07 02:09:44 +01:00
this.totalDuration = 0;
2017-12-31 01:54:52 +01:00
// we are drawing an animated image onto a static one.
// for each frame in the image, create a frame on this one, cloning the original picture (if any),
// render the original on each frame, and draw the frame on top.
2018-01-07 02:09:44 +01:00
// if this canvas already has a frame, update the duration
if (this.frames.length > 0) this.setDelay(this.frames[0], null, img.frames[0].delay);
2017-12-31 01:54:52 +01:00
for (let i = this.frames.length; i < img.frames.length; ++i) {
const frame = img.frames[i];
this.addFrame(null, frame.delay);
if (this.frames.length > 0) {
2018-01-03 14:04:57 +01:00
this.frames[i].ctx.antialias = 'none';
_drawImage(this.frames[i].ctx, this.frames[0].canvas, 0, 0, { width: this.width, height: this.height });
this.frames[i].ctx.antialias = 'default';
2017-12-31 01:54:52 +01:00
}
}
for (let i = 0; i < img.frames.length; ++i) {
// draw the i-th source frame to the i-th target frame
img.drawFrame(this.frames[i].ctx, i, x, y, args);
}
} else {
// we are drawing a static image on top of a (possibly animated) image.
// for each frame, just draw, nothing fancy.
2018-01-03 14:04:57 +01:00
if (img.frames) { // eslint-disable-line no-lonely-if
2017-12-31 01:54:52 +01:00
// the image cant have more than one frame, and if it has 0, we dont need to do anything at all
if (img.frames.length === 1) {
2017-12-31 13:59:14 +01:00
// if theres no frames at all, add one
if (this.frames.length === 0) {
this.addFrame(Infinity);
}
2017-12-31 01:54:52 +01:00
for (let i = 0; i < this.frames.length; ++i) {
img.drawFrame(this.frames[i].ctx, 0, x, y, args);
}
}
} else {
for (let i = 0; i < this.frames.length; ++i) {
2018-01-03 14:04:57 +01:00
_drawImage(this.frames[i].ctx, img, x, y, args);
2017-12-31 01:54:52 +01:00
}
}
}
}
drawFrame(ctx, frameNum, x, y, args = {}) {
2018-01-03 14:04:57 +01:00
_drawImage(ctx, this.frames[frameNum].canvas, x, y, args);
2017-12-31 01:54:52 +01:00
}
export(outStream) {
2017-12-31 13:59:14 +01:00
if (this.frames.length > 1) {
if (outStream.setHeader) outStream.setHeader('Content-Type', 'image/gif');
const gif = new GifEncoder(this.width, this.height);
gif.createReadStream().pipe(outStream);
// gif.setTransparent(0xfefe01);
gif.setRepeat(0);
gif.start();
for (let i = 0; i < this.frames.length; ++i) {
const frame = this.frames[i];
gif.setDelay(frame.actualDelay);
2017-12-31 13:59:14 +01:00
gif.addFrame(frame.ctx);
}
gif.finish();
} else if (this.frames.length === 1) {
if (outStream.setHeader) outStream.setHeader('Content-Type', 'image/png');
const stream = this.frames[0].canvas.pngStream();
stream.pipe(outStream);
} else {
throw new Error('No image data to be exported');
2017-12-31 01:54:52 +01:00
}
2017-12-31 13:59:14 +01:00
}
toBuffer() {
const buf = new streamBuffers.WritableStreamBuffer({
initialSize: this.height * this.width * 4 * this.frames.length,
incrementAmount: this.height * this.width * 4
});
this.export(buf);
return new Promise(resolve => {
buf.on('finish', () => {
2018-01-07 02:09:44 +01:00
console.log('Render completed');
2017-12-31 13:59:14 +01:00
resolve(buf.getContents());
});
});
2017-12-31 01:54:52 +01:00
}
}
module.exports = {
CanvasEx,
2018-02-25 18:47:47 +01:00
ImageEx,
_drawImage
2017-12-31 01:54:52 +01:00
};