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

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

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

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

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

Вот несколько js-библиотек для холста, которые, как мне кажется, делают то, что вы ищете:

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

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

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

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

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

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

PS я автор

Лучший способ фильтровать изображения в 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);

Сепия:

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

Runnable example of the previous filters:

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>