Применение фильтров изображения к данным изображения холста или в JavaScript

Question

Я разработчик Flash и работаю над портом игры в JavaScript.В Flash-версии я использую фильтры свечения, размытия и цветовой матрицы для управления внешним видом экранных объектов.Я хотел бы сделать то же самое с моим представлением JavaScript.Некоторые из них являются украшениями, в то время как другие используются для тщательного получения желаемого результата.Поскольку цели этого проекта состоят в том, чтобы создать точный порт, мне интересно, какие варианты у меня есть, чтобы применить фильтры к необработанным данным холста, встроенным SVG-тэгам или прямым DOM-элементам.но мой сотрудник на данный момент настаивает на лицензии GPL, что означает, что любая технология, которую я использую, должна быть совместима с GPL.Pixastic использует публичную лицензию Mozilla, поэтому я не могу ее использовать.(Что является большим обломом, позвольте мне сказать вам.)

Скажу еще раз кратко: как эффективно применять пиксельные фильтры к элементам DOM, к данным изображения холста или к тегам SVG с JavaScript?1005 *

Answer 1

Вот пример, показывающий некоторую фильтрацию SVG:

• http://xn - dahlstrm-t4a.net/svg/filters/colormatrix/svgimagefiltering.xhtml

и соответствующая версия холста:

• http://people.opera.com/patrickl/experiments/canvas/image-edit/

Вот некоторые библиотеки js для canvas, выполняющие то, что, я думаю, вы ищете:

• http://mezzoblue.github.com/PaintbrushJS/demo/
• https://github.com/pnitsch/BitmapData.js

Несколько примеров фильтров svg можно найти на http://svg -wow.org (CC0 лицензирован).

Answer 2

Я создал библиотеку ( context-blender ) для выполнения эффектов смешивания в стиле Photoshop между HTML-холстами. Это не совсем то, что вам нужно, так как вы хотите, чтобы некоторые фильтры свертки работали с пикселями, отличными от оригинала, но путь к коду будет таким же: getImageData(), munge данных, putImageData.

Моя библиотека имеет лицензию MIT, так что не стесняйтесь исследовать ее, не боясь проблем.

Answer 3

Лучший способ фильтровать изображения в Javascript - это среда обработки изображений. Некоторые чистые опции Javascript:

• fabric.js
• Processing.js
• MarvinJ

В случае MarvinJ , используйте следующий код для загрузки вашего изображения:

var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);

Я буду использовать следующее входное изображение для демонстрации некоторых фильтров:

GrayScale:

 Marvin.grayScale(image, imageOut);

Черно-белый:

Marvin.blackAndWhite(image, imageOut, 10);

Sepia:

Marvin.sepia(image, imageOut, 40);

Тиснение:

Marvin.emboss(image, imageOut);

Обнаружение края:

Marvin.prewitt(image, imageOut);

Размытие

Marvin.gaussianBlur(image, imageOut, 3);

Яркость и контрастность:

Marvin.brightnessAndContrast(image, imageOut, 70, 60);

Цветовой канал:

Marvin.colorChannel(image, imageOut, 0, 0, 110);

Пример запуска предыдущих фильтров:

var canvas1 = document.getElementById("canvas1");
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);

function imageLoaded(){
	var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
  
	// GrayScale
	Marvin.grayScale(image, imageOut);
	imageOut.draw(canvas1);
	
	// Black and White
	Marvin.blackAndWhite(image, imageOut, 10);
	imageOut.draw(canvas2);
	
	// Sepia
	Marvin.sepia(image, imageOut, 40);
	imageOut.draw(canvas3);
	
	// Emboss
	Marvin.emboss(image, imageOut);
	imageOut.draw(canvas4);
  
	// Edge
	imageOut.clear(0xFF000000);
	Marvin.prewitt(image, imageOut);
	imageOut.draw(canvas5);
  
	// Gaussian Blur
	Marvin.gaussianBlur(image, imageOut, 5);
	imageOut.draw(canvas6);
  
	// Brightness
	Marvin.brightnessAndContrast(image, imageOut, 70, 60);
	imageOut.draw(canvas7);
  
	// Color Channel
	Marvin.colorChannel(image, imageOut, 0, 0, 110);
	imageOut.draw(canvas8);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="192" height="120"></canvas>
<canvas id="canvas2" width="192" height="120"></canvas>
<canvas id="canvas3" width="192" height="120"></canvas>
<canvas id="canvas4" width="192" height="120"></canvas>
<canvas id="canvas5" width="192" height="120"></canvas>
<canvas id="canvas6" width="192" height="120"></canvas>
<canvas id="canvas7" width="192" height="120"></canvas>
<canvas id="canvas8" width="192" height="120"></canvas>

Answer 4

Библиотека Filter.js для обработки изображений (включая многие типы фильтров AS3, такие как свертка, цветовая матрица, карта смещения и т. Д.)

https://github.com/foo123/FILTER.js

PS Я автор