純JavaScript圖像處理

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'Pomax'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圖像操作調整大小和裁剪的示例 ：

 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>