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

【问题标题】：Applying image filters to canvas image data or in JavaScript将图像过滤器应用于画布图像数据或 JavaScript
【发布时间】：2011-06-06 08:39:02
【问题描述】：

我是一名 Flash 开发人员，我正在开发游戏的 JavaScript 端口。在 Flash 版本中，我使用发光、模糊和颜色矩阵过滤器来处理显示对象的外观。我想对我的 JavaScript 视图做同样的事情。其中一些是点缀，而另一些则用于精心制作所需的结果。因为这个项目的目标是创建一个精确的端口，所以我想知道我必须使用哪些选项来将过滤器应用于原始画布数据、内联 SVG 标记或直接排列 DOM 元素。

我考虑过 Pixastic，但我的合作者暂时坚持使用 GPL 许可证，这意味着我使用的任何技术都必须与 GPL 兼容。 Pixastic 使用 Mozilla Public License，所以我不能使用它。（让我告诉你，这是一个巨大的无赖。）

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

【问题讨论】：

您是否要求作者更改许可证或双许可证 Pixastic？我想知道他是否有特定的理由使用 MPL 而不是 BSD 或其他流行的替代方案......

标签： javascript html canvas svg svg-filters

【解决方案1】：

这是一个展示一些 svg 过滤的示例：

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

以及对应的画布版本：

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

这里有一些用于画布的 js 库，可以满足您的需求：

可以在http://svg-wow.org（CC0 许可）上找到许多 svg 过滤器示例。

【讨论】：

这是一个漂亮的 stackblur 演示，quasimondo.com/StackBlurForCanvas/StackBlurDemo.html。
卡西蒙多是男人，不是吗？我想我会使用那个 StackBlur，如果我的 GPL 快乐朋友没有看到我不这样做的任何理由。 BitmapData.js 对于其他一些操作看起来非常有效，但我在尝试之前无法确定。

【解决方案2】：

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

我的库恰好是 MIT 许可证，因此请随意在那里进行调查，而不必担心出现问题。

【讨论】：

【解决方案3】：

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

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

PS我是作者

【讨论】：

【解决方案4】：

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

对于MarvinJ，使用下面的代码来加载你的图片：

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

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

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>

【讨论】：