在画布图像数据或JavaScript中应用图像过滤器

我是一名Flash开发人员，正在开发一个游戏的JavaScript端口。在Flash版本中，我使用辉光、模糊和颜色矩阵过滤器来操纵显示对象的外观。我希望对我的JavaScript视图也这样做。其中一些是修饰，而另一些则用于仔细地产生所需的结果。因为这个项目的目标是创建一个精确的端口，所以我想知道我必须对原始画布数据、内联SVG标记或直接向上的DOM元素应用过滤器的选项

我曾考虑过Pixastic，但我的合作者目前坚持使用GPL许可证，这意味着我使用的任何技术都必须与GPL兼容。Pixastic使用Mozilla公共许可证，所以我不能使用它。（让我告诉你，这真是个大麻烦。）

---

我要简单地再说一遍：如何有效地将像素过滤器应用于DOM元素、画布图像数据或使用JavaScript的SVG标记？

下面是一个显示一些SVG过滤的示例：

以及相应的画布版本：

以下是一些用于canvas的js库，我认为您正在寻找这些库：

在（CC0许可）上可以找到许多svg过滤器示例。

我创建了一个库（），用于在HTML画布之间执行Photoshop风格的混合效果。这并不是您所需要的，因为您希望在原始像素以外的像素上运行一些卷积过滤器，但代码路径将是相同的：

getImageData（）

，munge the data，

putImageData

---

我的库恰好是MIT许可证，因此可以放心地在那里进行调查，而不必担心问题。

Filter.js图像处理库（包括许多AS3过滤器类型，如卷积、颜色矩阵、置换贴图等）

---

PS我是作者

在Javascript中过滤图像的最佳方法是通过图像处理框架。一些纯Javascript选项：

在的情况下，请使用以下代码加载图像：

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

我将使用以下输入图像演示一些过滤器：

灰度：

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

黑白：

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

乌贼墨：

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

浮雕：

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

边缘检测：

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

模糊：

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

亮度和对比度：

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

颜色通道：

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

以前过滤器的可运行示例：

var canvas1=document.getElementById（“canvas1”）；
var image=新的MarvinImage（）；
image.load（“https://i.imgur.com/By6tvip.jpg“，图像加载）；
函数imageLoaded（）{
var imageOut=newmarvinimage（image.getWidth（），image.getHeight（））；
//灰度
马文灰度（图像，图像输出）；
imageOut.draw（画布1）；
//黑白
马文·布莱克和怀特（图像，图像输出，10）；
imageOut.draw（画布2）；
//乌贼墨
马文。乌贼墨（图片，imageOut，40）；
imageOut.draw（canvas3）；
//浮雕
马文.浮雕（图像，图像输出）；
imageOut.draw（画布4）；
//边缘
imageOut.clear（0xFF000000）；
马文·普雷维特（图像，图像输出）；
imageOut.draw（画布5）；
//高斯模糊
马文·高斯·卢尔（图像，图像输出，5）；
imageOut.draw（canvas6）；
//亮度
亮度和对比度（图像，图像输出，70,60）；
imageOut.draw（画布7）；
//彩色通道
彩色通道（图像，图像输出，0,0,110）；
imageOut.draw（canvas8）；
}

您是否要求作者更改许可证或双许可证Pixastic？我想知道他是否有特别的理由使用MPL而不是BSD或其他流行的替代品……这是一个漂亮的stackblur演示。卡西蒙多就是那个人，不是吗？我想我会使用StackBlur，如果我的GPL快乐的朋友不认为我有任何理由不这么做的话。BitmapData.js对于其他一些操作看起来非常有效，不过在尝试之前我无法确定。