将图像过滤器应用于画布图像数据或在 JavaScript 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4644144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying image filters to canvas image data or in JavaScript
提问by Rezmason
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.
我是一名 Flash 开发人员，正在开发游戏的 JavaScript 端口。在 Flash 版本中，我使用发光、模糊和颜色矩阵过滤器来处理显示对象的外观。我想对我的 JavaScript 视图做同样的事情。其中一些是装饰品，而另一些则用于精心制作所需的结果。因为这个项目的目标是创建一个精确的端口，我想知道我有哪些选项可以将过滤器应用于原始画布数据、内联 SVG 标签或直接 DOM 元素。
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.)
我考虑过 Pixastic，但我的合作者暂时坚持使用 GPL 许可证，这意味着我使用的任何技术都必须与 GPL 兼容。Pixastic 使用 Mozilla 公共许可证，所以我不能使用它。（这是一个巨大的无赖，让我告诉你。）
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?
我再说一遍：如何有效地将像素过滤器应用于 DOM 元素、画布图像数据或使用 JavaScript 的 SVG 标签？
采纳答案by Erik Dahlstr?m
Here's an example showing some svg filtering:
这是一个显示一些 svg 过滤的示例：
and the corresponding canvas version:
和相应的画布版本：
Here are some js libraries for canvas doing what I think you're looking for:
以下是一些用于画布的 js 库，可以满足您的需求：
A number of svg filter examples can be found on http://svg-wow.org(CC0 licensed).
可以在http://svg-wow.org（CC0 许可）上找到许多 svg 过滤器示例。
回答by Phrogz
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.
我创建了一个库（context-blender）用于在 HTML Canvases 之间执行 Photoshop 风格的混合效果。这并不是您真正需要的，因为您希望一些卷积过滤器在原始像素以外的像素上运行，但代码路径将相同：getImageData(), munge 数据, putImageData.
My library happens to be MIT License, so feel free to investigate there with no fear of issues.
我的图书馆恰好是 MIT 许可证，所以可以随意在那里进行调查而不必担心出现问题。
回答by Nikos M.
Filter.js library for image processing (including many AS3 filter types, like convolution, colormatrix, displacement map etc..)
用于图像处理的 Filter.js 库（包括许多 AS3 过滤器类型，如卷积、颜色矩阵、置换图等。）
https://github.com/foo123/FILTER.js
https://github.com/foo123/FILTER.js
PS i am the author
PS我是作者
回答by Gabriel Ambrósio Archanjo
The best way to filter images in Javascript is through an image processing framework. Some pure Javascript options:
在 Javascript 中过滤图像的最佳方法是通过图像处理框架。一些纯 Javascript 选项：
In the case of MarvinJ, use the following code to load your image:
对于MarvinJ，请使用以下代码加载图像：
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>