Manipulação pura de imagem JavaScript
eu tenho um caso de uso, onde eu quero criado (a) um Nó de aplicação (b) executa básica manipulações de imagem (PNG redimensionar e recortar), mas (c), onde eu não posso ter de dependências externas, como bibliotecas nativas, GraphicsMagick, ImageMagick, PhantonJS, Inkscape, etc.
Tudo tem de ser feito em JavaScript puro.
Dado o quão simples a manipulação que quero fazer é (apenas dimensionar e recortar PNG) isto não parece impossível. No entanto, não consigo encontrar uma biblioteca de recorte / dimensionamento que não tem uma dependência externa ou nativa.
Existe uma biblioteca de JavaScript genuinamente pura para recortar/redimensionar? Quão difícil seria implementar isso em JavaScript puro, se eu tivesse que fazê-lo eu mesmo? E por onde devo começar?
alternativamente, existe uma função C adequada para isso que eu poderia compilar usando emscripten, por exemplo?
3 answers
A utilização de exemplo é:
var Jimp = require("jimp");
var lenna = new Jimp("lenna.png", function () {
this.crop(100, 100, 300, 200) // crop
.resize(220, 220) // resize
.write("lenna-small-cropped.png"); // save
});
O avanço foi encontrar um algoritmo de escala bicubica de JavaScript aqui: https://github.com/grantgalitz/JS-Image-Resizer
Parabéns ao Mike 'Pomax' Kamermans por apontar a direcção certa e conceder ao Galitz um algoritmo de escala incrível.Pode tentar comparar o nó.módulos js para manipulação de imagens - https://github.com/ivanoff/images-manipulation-performance
author's results:
sharp.js : 9.501 img/sec; done in 10.525585 sec;
canvas.js : 8.246 img/sec; done in 12.12766 sec;
gm.js : 4.433 img/sec; done in 22.557112 sec;
gm-imagemagic.js : 3.654 img/sec;
lwip.js : 1.203 img/sec;
jimp.js : 0.445 img/sec;
Exemplo de dimensionamento e recorte usando manipulação de imagem javascript pura com MarvinJ:
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var canvas3 = document.getElementById("canvas3");
image = new MarvinImage();
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded);
function imageLoaded(){
imageOut = image.clone()
image.draw(canvas1)
// Crop
Marvin.crop(image, imageOut, 50, 50, 100, 100);
imageOut.draw(canvas2);
// Scale
Marvin.scale(image, imageOut, 100);
imageOut.draw(canvas3);
}<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas><br/>
<canvas id="canvas3" width="200" height="200"></canvas>