Question

我有一个用例，我想创建（a）一个Node应用程序，（b）执行基本的图像处理（PNG调整大小和裁剪），但（c）我不能有外部依赖，如本机库，GraphicsMagick，ImageMagick ，PhantonJS，Inkscape等。

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

考虑到我想要做的操作有多简单（只是PNG调整大小和裁剪），这似乎不可能。但是，我找不到最终没有外部或本机依赖关系的裁剪/调整大小库。

是否存在裁剪/调整大小的真正纯JavaScript库？如果我必须自己做，那么在纯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
});

突破是在这里找到一个JavaScript双三次双通缩放算法：https://github.com/grantgalitz/JS-Image-Resizer

对Mike＆＃39; Pomax＆＃39;的赞誉Kamermans指出正确的方向，以及Grant Galitz的惊人缩放算法。

Answer 2

您可以尝试比较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;

Answer 3

使用MarvinJ的纯javascript图像操作调整大小和裁剪的示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

纯JavaScript图像处理

3 个答案: