2020-07-16 15:32:59 +08:00
|
|
|
/*
|
|
|
|
Utility to modify images with a canvas
|
|
|
|
*/
|
|
|
|
|
|
|
|
class CanvasFrame {
|
|
|
|
constructor(a, b) {
|
|
|
|
if (a && a.nodeName == 'CANVAS') {
|
|
|
|
if (a.getContext('2d')) {
|
|
|
|
this.canvas = a;
|
|
|
|
} else {
|
|
|
|
this.createCanvas(a.width, a.height)
|
|
|
|
this.loadFromImage(a)
|
|
|
|
}
|
|
|
|
|
|
|
|
} else if (a && a.nodeName == 'IMG') {
|
|
|
|
this.createCanvas(a.naturalWidth, a.naturalHeight)
|
|
|
|
this.loadFromImage(a)
|
|
|
|
|
|
|
|
} else if (a && b) {
|
|
|
|
this.createCanvas(a, b)
|
|
|
|
}
|
|
|
|
this.ctx = this.canvas.getContext('2d')
|
|
|
|
}
|
|
|
|
get width() {return this.canvas.width;}
|
|
|
|
get height() {return this.canvas.height;}
|
|
|
|
|
|
|
|
createCanvas(w, h) {
|
|
|
|
this.canvas = document.createElement('canvas');
|
|
|
|
this.canvas.width = w;
|
|
|
|
this.canvas.height = h;
|
|
|
|
this.ctx = this.canvas.getContext('2d')
|
|
|
|
}
|
|
|
|
async loadFromURL(url) {
|
|
|
|
let img = new Image()
|
2020-11-08 03:48:58 +08:00
|
|
|
img.src = url.replace(/#/g, '%23');
|
2020-07-16 15:32:59 +08:00
|
|
|
await new Promise((resolve, reject) => {
|
2020-10-15 21:55:19 +08:00
|
|
|
img.onload = () => {
|
|
|
|
this.loadFromImage(img);
|
|
|
|
resolve();
|
2020-07-16 15:32:59 +08:00
|
|
|
}
|
|
|
|
img.onerror = reject;
|
|
|
|
})
|
|
|
|
}
|
|
|
|
loadFromImage(img) {
|
|
|
|
if (img.naturalWidth) {
|
|
|
|
this.canvas.width = img.naturalWidth;
|
|
|
|
this.canvas.height = img.naturalHeight;
|
|
|
|
}
|
|
|
|
this.ctx.drawImage(img, 0, 0)
|
|
|
|
}
|
|
|
|
loadFromCanvas(img) {
|
|
|
|
this.canvas.width = image.naturalWidth;
|
|
|
|
this.canvas.height = image.naturalHeight;
|
|
|
|
this.ctx.drawImage(img, 0, 0)
|
|
|
|
}
|
|
|
|
autoCrop() {
|
|
|
|
// Based on code by remy, licensed under MIT
|
|
|
|
// https://gist.github.com/remy/784508
|
|
|
|
|
|
|
|
let copy = document.createElement('canvas').getContext('2d');
|
|
|
|
let pixels = this.ctx.getImageData(0, 0, this.width, this.height);
|
|
|
|
let i;
|
|
|
|
let bound = {
|
|
|
|
top: null,
|
|
|
|
left: null,
|
|
|
|
right: null,
|
|
|
|
bottom: null
|
|
|
|
};
|
|
|
|
let x, y;
|
|
|
|
|
|
|
|
for (i = 0; i < pixels.data.length; i += 4) {
|
|
|
|
if (pixels.data[i+3] !== 0) {
|
|
|
|
x = (i / 4) % this.width;
|
|
|
|
y = ~~((i / 4) / this.width);
|
|
|
|
|
|
|
|
if (bound.top === null) {
|
|
|
|
bound.top = y;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (bound.left === null) {
|
|
|
|
bound.left = x;
|
|
|
|
} else if (x < bound.left) {
|
|
|
|
bound.left = x;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (bound.right === null) {
|
|
|
|
bound.right = x;
|
|
|
|
} else if (bound.right < x) {
|
|
|
|
bound.right = x;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (bound.bottom === null) {
|
|
|
|
bound.bottom = y;
|
|
|
|
} else if (bound.bottom < y) {
|
|
|
|
bound.bottom = y;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var trimHeight = bound.bottom - bound.top,
|
|
|
|
trimWidth = bound.right - bound.left,
|
|
|
|
trimmed = this.ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
|
|
|
|
|
|
|
|
copy.canvas.width = trimWidth;
|
|
|
|
copy.canvas.height = trimHeight;
|
|
|
|
copy.putImageData(trimmed, 0, 0);
|
|
|
|
this.canvas = copy.canvas;
|
|
|
|
this.ctx = copy;
|
|
|
|
}
|
|
|
|
}
|