将图像过滤器应用于画布图像数据或JavaScript

Question

I'm a Flash developer, and I'm working on a JavaScript port of a game. In the Flash version, I use glow, blur and color matrix filters to manipulate the appearances of display objects. I would like to do the same with my JavaScript view. Some of these are embellishments, while others are used to carefully produce a desired result. Because this project's goals are to create an exact port, I'm wondering what options I have to apply filters to raw canvas data, to inline SVG tags or to straight up DOM elements.

I've considered Pixastic, but my collaborator insists on a GPL license for the time being, which means any tech I use must be GPL compatible. Pixastic uses the Mozilla Public License, so I can't use it. (Which is a huge bummer, let me tell you.)

I'll say it again concisely: how do I efficiently apply pixel filters to DOM elements, to canvas image data or to SVG tags with JavaScript?

Answer 1

Here's an example showing some svg filtering:

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

and the corresponding canvas version:

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

Here are some js libraries for canvas doing what I think you're looking for:

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

A number of svg filter examples can be found on http://svg-wow.org (CC0 licensed).

Answer 2

I have created a library ( context-blender ) for performing Photoshop-style blend effects between HTML Canvases. This isn't exactly what you need, as you want some convolution filters to run on the pixels other than the original, but the code path will be the same: getImageData() , munge the data, putImageData .

My library happens to be MIT License, so feel free to investigate there with no fear of issues.

Answer 3

Filter.js library for image processing (including many AS3 filter types, like convolution, colormatrix, displacement map etc..)

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

PS i am the author

Answer 4

The best way to filter images in Javascript is through an image processing framework. Some pure Javascript options:

• fabric.js
• processing.js
• MarvinJ

In the case of MarvinJ , use the following code to load your image:

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

I'll use the following input image to demonstrate some filters:

GrayScale:

 Marvin.grayScale(image, imageOut);

Black and White:

Marvin.blackAndWhite(image, imageOut, 10);

Sepia:

Marvin.sepia(image, imageOut, 40);

Emboss:

Marvin.emboss(image, imageOut);

Edge Detection:

Marvin.prewitt(image, imageOut);

Blur:

Marvin.gaussianBlur(image, imageOut, 3);

Brightness and Contrast:

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

Color Channel:

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>