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

时间:2011-01-10 06:07:53

标签: javascript html5 canvas svg svg-filters

我是Flash开发人员,我正在开发游戏的JavaScript端口。在Flash版本中,我使用发光,模糊和颜色矩阵滤镜来操纵显示对象的外观。我想用我的JavaScript视图做同样的事情。其中一些是装饰,而另一些则用于仔细产生所需的结果。因为这个项目的目标是创建一个精确的端口,我想知道我有什么选择将过滤器应用于原始画布数据,内联SVG标签或直接DOM元素。

我考虑过Pixastic,但我的合作者暂时坚持使用GPL许可证,这意味着我使用的任何技术都必须兼容GPL。 Pixastic使用Mozilla Public License,因此我无法使用它。 (这是一个巨大的失败,让我告诉你。)

我将再次简明扼要地说:如何有效地将像素过滤器应用于DOM元素,使用JavaScript绘制图像数据或SVG标签?

4 个答案:

答案 0 :(得分:5)

这是一个显示一些svg过滤的例子:

和相应的画布版本:

以下是一些用于画布的js库,我们认为你正在寻找:

可以在http://svg-wow.org(有照片的CC0)上找到许多svg过滤器示例。

答案 1 :(得分:3)

我创建了一个库(context-blender),用于在HTML画布之间执行Photoshop风格的混合效果。这不是您所需要的,因为您希望某些卷积滤镜在原始像素以外的其他像素上运行,但代码路径将相同:getImageData(),使数据变为putImageData

我的图书馆恰好是麻省理工学院的许可证,所以请随时调查,不要担心问题。

答案 2 :(得分:1)

用于图像处理的Filter.js库(包括许多AS3过滤器类型,如卷积,颜色矩阵,置换贴图等)。

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

PS我是作者

答案 3 :(得分:1)

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

如果是MarvinJ,请使用以下代码加载您的图片:

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

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

enter image description here

<强>灰度:

 Marvin.grayScale(image, imageOut);

enter image description here

黑与白:

Marvin.blackAndWhite(image, imageOut, 10);

enter image description here

<强>棕褐色:

Marvin.sepia(image, imageOut, 40);

enter image description here

<强>浮雕:

Marvin.emboss(image, imageOut);

enter image description here

边缘检测:

Marvin.prewitt(image, imageOut);

enter image description here

<强>模糊:

Marvin.gaussianBlur(image, imageOut, 3);

enter image description here

亮度和对比度:

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

enter image description here

色彩渠道:

Marvin.colorChannel(image, imageOut, 0, 0, 110);

enter image description here

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

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>