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

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

Я рассматривал Pixastic, но мой сотрудник настаивает на лицензии GPL на данный момент, что означает, что любая технология, которую я использую, должна быть совместима с GPL. Pixastic использует публичную лицензию Mozilla, поэтому я не могу ее использовать. (Это огромный облом, скажу я вам.)

Я скажу это еще раз кратко: как эффективно применять пиксельные фильтры к элементам DOM, данным canvas image или тегам SVG с помощью JavaScript?

8
canvas html5 javascript svg svg-filters

4 ответов

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

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

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

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

5

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

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

3

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

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

PS Я автор

1

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

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

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

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

enter image description here

написать:

 Marvin.grayScale(image, imageOut);

enter image description here

черный и Белый:

Marvin.blackAndWhite(image, imageOut, 10);

enter image description here

сепия:

Marvin.sepia(image, imageOut, 40);

enter image description here

тиснение:

Marvin.emboss(image, imageOut);

enter image description here

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

Marvin.prewitt(image, imageOut);

enter image description here

размытие:

Marvin.gaussianBlur(image, imageOut, 3);

enter image description here

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

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

enter image description here

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

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

enter image description here

Runnable пример предыдущего фильтры: 

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>
0