Thao tác hình ảnh JavaScript thuần túy

Question

Tôi có một trường hợp sử dụng mà tôi muốn tạo (a) một ứng dụng Node (b) thực hiện thao tác hình ảnh cơ bản (PNG thay đổi kích thước và cắt) nhưng (c) nơi tôi không thể có các phụ thuộc bên ngoài như thư viện gốc , GraphicsMagick, ImageMagick, PhantonJS, Inkscape, v.v.

Tất cả phải được thực hiện bằng JavaScript thuần túy.

Do thao tác đơn giản mà tôi muốn làm là (chỉ thay đổi kích thước và cắt PNG) điều này dường như không thể. Tuy nhiên, tôi không thể tìm thấy thư viện cắt/thay đổi kích thước mà cuối cùng không có sự phụ thuộc bên ngoài hoặc gốc.

Thư viện JavaScript thực sự thuần túy này có tồn tại để cắt/thay đổi kích thước không? Làm thế nào khó khăn để thực hiện điều này trong JavaScript thuần túy, nếu tôi phải tự mình làm điều đó? Và tôi nên bắt đầu từ đâu?

Ngoài ra, có một hàm C phù hợp cho điều này mà tôi có thể biên dịch bằng emscripten không?

Answer 1

OK, tôi đã kết thúc cán của riêng tôi, mà tôi đã phát hành như là một gói NPM đây: https://www.npmjs.org/package/jimp

sử dụng Ví dụ là:

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

Bước đột phá được tìm bicubic Javascript hai-pass rộng thuật toán ở đây: https://github.com/grantgalitz/JS-Image-Resizer

Kudos to Mike 'Pomax' Kamermans để chỉ đúng hướng đi và đến Grant Galitz cho thuật toán mở rộng tuyệt vời.

Answer 2

Bạn có thể thử để so sánh các module Node.js cho hình ảnh manipulation - 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

Ví dụ về thay đổi kích thước và cây trồng sử dụng tinh khiết xử lý ảnh javascript với 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>