应用CSS滤镜效果捕捉/保存/导出图像
我正在制作一个使用CSS3滤镜效果的简单图片编辑器（饱和度，棕褐色，对比度等）
制作图片编辑器很容易，但无论是否可以使用filter保存或导出图像都难以置信。
我最初对@ niklasvh的html2canvas很有希望 。 不幸的是，它不能捕获大多数CSS3属性，更不用说过滤效果了。
如果任何人有解决方案或遗憾，明确知道这是不可能的，那将非常感谢！ 谢谢！
你不是，我知道，能够将CSS应用于HTML5 canvas元素中的图形（因为它们不是DOM的一部分）。
但是，那没关系！ 我们仍然可以相对容易地完成基本的滤镜效果，只需几行JavaScript就可以将它们保存为图像。
我发现了一篇很好的文章，它将类似棕褐色的效果应用到canvas并将其保存为图像 。 我将重点介绍文章中较大的内容，而不是复制它。
修改canvas图像：
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) { ... } 为了访问某些canvas API，您需要使用上面的JavaScript在canvas上激活2D上下文。 MDN有关于上下文对象可用的API的一些很好的文档，但是这里要注意的重要部分是getImageData()调用。 基本上，它将获取您定义的区域中的所有像素值（在上面的情况下，我们抓取整个图像）。 然后，有了这些数据，我们可以迭代所有像素并根据需要更改它们。 在棕褐色文章中 ，它显然做了一些有趣的调整，但你也可以根据需要进行灰度，模糊或任何其他更改，并且在Github上有一个非常棒的canvasfilter库 。
如何保存canvas图像：
var canvas = document.getElementById('canvasElementId'), image = document.createElement("img"); image.src = canvas.toDataURL('image/jpeg'); document.body.appendChild(image);
上面的脚本将选择你的canvas（假设你已经完成了你的绘图）并创建了一个图像元素。 它们使用toDataURL()生成一个url，您可以使用它来设置图像元素的源。 在上面的示例中，图像元素被附加到文档正文。 您可以在MDN的canvas页面上查看更多信息。
我得到了你的答案。 我做了这个程序，最后它的工作。
那些步骤是：
1.上传图片（JPG / PNG）
2.转换为canvas
3.使用cssfilter自定义。
4.使用camanJS渲染以保存为图像。
完了
您还可以通过将filter的值修改为默认值来重置效果值。
祝好运！