Pure JavaScript image manipulation
OK, I ended up rolling my own, which I have released as a NPM package here: https://www.npmjs.org/package/jimp
Example usage is:
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});The breakthrough was finding a JavaScript bicubic two-pass scaling algorithm here: https://github.com/grantgalitz/JS-Image-Resizer
Kudos to Mike 'Pomax' Kamermans for pointing the right direction to take and to Grant Galitz for an amazing scaling algorithm.
You can try to compare Node.js modules for images manipulation - 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;
Example of resize and crop using pure javascript image manipulation with 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>