捕获/保存/用CSS滤镜效果输出图像的应用

Question

我身边的工具，使使用CSS3滤镜效果（饱和度，棕褐色，对比度等）

制作的图片编辑器是一个简单的图片编辑器容易的部分，但是是否有可能保存或出口过滤器应用图像似乎非常困难..

我原本寄予厚望@niklasvh's html2canvas。不幸的是，它并没有捕获大多数CSS3属性，更不用说过滤效果了。

如果有人有一个解决方案或可悲的是，明确的知识，这是不可能的，这将不胜感激！谢谢！

Answer 1

你不是，我意识到，能够将CSS应用于HTML5 canvas元素中的图形（因为它们不是DOM的一部分）。

但是，没关系！我们仍然可以使用相对简单的基本过滤器效果，并通过几行JavaScript将它们保存为图像。

我发现了一篇很好的文章，应用sepia-like effect to the canvas and saving it as an image。我将重点介绍文章中较大的内容，而不是复制它。

修改画布图像：

var canvas = document.getElementById('canvasElementId'), 
    context = canvas.getContext('2d'); 

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

for (var i = 0; i < imageData.data.length; i+=4) { 
    ... 
} 

为了获得访问一些帆布API，您需要激活使用以上的JavaScript在画布上的2D背景。 MDN有一些关于API的很好的文档，可以通过context object获得，但是这里需要注意的重要部分是getImageData()调用。基本上，它会抓取您定义区域中的所有像素值（在上述情况下，我们抓取整个图像）。然后，通过掌握这些数据，我们可以遍历所有像素并根据需要进行更改。在sepia article中，显然会做出一些有趣的调整，但您也可以根据需要进行灰度，模糊或任何其他更改，并且有一个很棒的选项。

如何保存画布图像：

var canvas = document.getElementById('canvasElementId'), 
    image = document.createElement("img"); 

image.src = canvas.toDataURL('image/jpeg'); 

document.body.appendChild(image); 

以上脚本将选择你的画布（假设你已经做了你的图纸），并创建一个图像元素。它们使用toDataURL()生成一个url，您可以使用它来设置图像元素上的源。在上例中，图像元素被附加到文档主体。您可以在MDN's canvas page上查看更多信息。

Answer 2

我得到了你的答案。 我做了这个程序，最后它的工作。

那些步骤是：
1.上传图像（JPG/PNG）
2.转换到帆布
3.定制的CSS过滤器。
4.渲染使用camanJS保存为图像。
5.完成。

您还可以通过将滤镜的值修改为默认值来重置效果值。

好运！