純JavaScript圖像操作

我有一個用例，我想創建（a）Node應用程序（b）執行基本的圖像操作（PNG調整大小和裁剪），但（c）我不能像本地庫一樣具有外部依賴性，GraphicsMagick，ImageMagick，PhantonJS，Inkscape等。純JavaScript圖像操作

這一切都必須在純JavaScript中完成。

鑑於我想要做的操作非常簡單（只是PNG調整大小和裁剪），這似乎不可能。但是，我找不到最終沒有外部或本地依賴關係的裁剪/調整大小的庫。

這樣一個真正純粹的JavaScript庫是否存在裁剪/調整大小？如果我必須自己做這件事，那麼在純JavaScript中實現這個有多困難？我應該從哪裏開始？

另外，是否有一個合適的C函數，我可以使用emscripten編譯，例如？

來源

2014-09-12 Oliver Moran

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=JavaScript%20librar y％20crop％2Fresize – 2014-09-12 20:24:44

@JamesG。所有優秀的東西，如果我可以使用無頭瀏覽器，如Phantom JS，DOM實現，如js-dom。但是，它們都具有外部（本地）依賴關係。 – 2014-09-12 20:28:06

處理純Javascript中的PNG *是可能的* - 對「可能」的慷慨解釋。 Javascript可以用eaze操縱二進制文件;解壓，然後*重新*壓縮原始圖像數據並不那麼容易（這需要一個純JS版本的Flate和Deflate），但仍然在「可行」的範圍內。不過，我不相信它會很快。 – usr2564301 2014-09-12 20:31:05

OK，我結束了我自己的滾動，我已經發布了一個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提供了一個驚人的縮放算法。

來源

2014-09-13 23:07:03

謝謝你，我很驚訝，對此沒有什麼反饋。我不得不稍微修改它以直接與緩衝區一起工作，對於小型操作來說它絕對看起來很棒。做得好！ – 2014-09-24 22:07:34

@IgorR，謝謝。如果你有任何改進，請打開一個問題或提出拉請求：https：//github.com/oliver-moran/jimp – 2014-09-28 19:23:19

我所做的是不完整的，只適用於JPG，這是一個骯髒的執行不夠好，拉，只是使它爲我的目的工作。當我有一段時間會嘗試完成它爲PNG和改善代碼，然後提出拉請求。我只是想知道，如果完全有可能沒有，那麼大多數人可以滿足* Magick的負擔。 – 2014-09-30 08:38:50

你可以嘗試，爲圖像處理比較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;

來源

2016-08-11 06:48:48

我不知道爲什麼這是downvoted，但我發現上面的鏈接相當有用。 – 2018-02-25 16:37:09

例和作物使用純JavaScript圖像處理與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) \t 
 
    // Crop 
 
    Marvin.crop(image, imageOut, 50, 50, 100, 100); 
 
    imageOut.draw(canvas2); 
 
    // Scale 
 
    Marvin.scale(image, imageOut, 100); 
 
\t 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>

來源

2017-11-16 02:27:13

純JavaScript圖像操作

回答

相關問題