纯 JavaScript 图像处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25816236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure JavaScript image manipulation
提问by Oliver Moran
I have a use case where I want to created (a) a Node application that (b) performs basic image manipulations (PNG resize and crop) but (c) where I cannot have external dependencies like native libraries, GraphicsMagick, ImageMagick, PhantonJS, Inkscape, etc.
我有一个用例，我想创建 (a) 一个 Node 应用程序，该应用程序 (b) 执行基本的图像操作（PNG 调整大小和裁剪），但是 (c) 我不能拥有诸如本机库、GraphicsMagick、ImageMagick、PhantonJS 等外部依赖项，水墨画等
It all has to be done in pure JavaScript.
这一切都必须在纯 JavaScript 中完成。
Given how simple the manipulation I want to do is (just PNG resize and crop) this doesn't seem impossible. However, I cannot find a crop/resize library that doesn't ultimately have an external or native dependency.
鉴于我想要做的操作是多么简单（只是 PNG 调整大小和裁剪），这似乎并非不可能。但是，我找不到最终没有外部或本机依赖项的裁剪/调整大小库。
Does such a genuinely pure JavaScript library exist for crop/resize? How difficult would it be to implement this in pure JavaScript, if I had to do it myself? And where should I start?
是否存在用于裁剪/调整大小的真正纯 JavaScript 库？如果我必须自己做的话，用纯 JavaScript 实现它会有多困难？我应该从哪里开始？
Alternatively, is there a suitable C function for this that I could compile using emscripten, for example?
或者，例如，是否有合适的 C 函数可以使用 emscripten 进行编译？
回答by Oliver Moran
OK, I ended up rolling my own, which I have released as a NPM package here: https://www.npmjs.org/package/jimp
好的，我最终推出了我自己的，我已在此处作为 NPM 包发布：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
突破是在这里找到了 JavaScript 双三次缩放算法：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.
感谢 Mike 'Pomax' Kamermans 指出了正确的方向，感谢 Grant Galitz 提出了令人惊叹的缩放算法。
回答by Dimitry Ivanov
You can try to compare Node.js modules for images manipulation - https://github.com/ivanoff/images-manipulation-performance
您可以尝试比较用于图像处理的 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;
回答by Gabriel Ambrósio Archanjo
Example of resize and crop using pure javascript image manipulation with MarvinJ:
使用MarvinJ 的纯 javascript 图像操作调整大小和裁剪的示例：
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>