Чистая обработка изображений JavaScript

У меня есть прецедент, в котором я хочу создать (a) приложение Node, которое (б) выполняет основные манипуляции с изображениями (изменение размера и обрезки PNG), но (c) где я не могу иметь внешние зависимости, например, родные библиотеки, GraphicsMagick, ImageMagick, PhantonJS, Inkscape и т.д.

Все это должно быть сделано в чистом JavaScript.

Учитывая, насколько просто манипулировать, которую я хочу сделать (просто изменить размер PNG и обрезать), это не кажется невозможным. Тем не менее, я не могу найти библиотеку урожая/изменения размера, которая в конечном счете не имеет внешней или родной зависимости.

Существует ли такая подлинно чистая библиотека JavaScript для обрезки/изменения размера? Насколько сложно было бы реализовать это в чистом JavaScript, если бы мне пришлось это сделать самому? И с чего начать?

В качестве альтернативы, есть ли подходящая функция C для этого, которую я мог бы скомпилировать с помощью emscripten, например?

Ответ 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

Престижность Майку "Помакс" Камерманс за то, что он указал в правильном направлении, и Гранту Галицу за удивительный алгоритм масштабирования.

Ответ 2

Вы можете попробовать сравнить модули Node.js для обработки изображений - https://github.com/ivanoff/images-manipulation-performance

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

Ответ 3

Пример изменения размера и обрезки с использованием обработки изображений с использованием 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)	
  // 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>