使用CSS滤镜效果捕获/保存/导出图像

Question

我正在制作一个简单的图片编辑器，使用CSS3滤镜效果（饱和度、复古、对比度等）。

制作图片编辑器很容易，但是似乎难以实现应用滤镜后保存或导出图片。

我最初希望可以通过@niklasvh的html2canvas实现。不幸的是，它无法捕捉大多数CSS3属性，更别提滤镜效果了。

如果有人有解决方案或者遗憾地告诉我这是不可能的，那将不胜感激！谢谢！

- Bennett

---

这个问题解决了吗？因为我也遇到了完全相同的问题。 - user3508453

也遇到了同样的问题。 - Ronnie

Answer 1

据我所知，您无法将CSS应用于HTML5画布元素中的图形（因为它们不是DOM的一部分）。

然而，这没关系！我们仍然可以相对容易地进行基本的滤镜效果，并只需几行JavaScript代码就可以将其保存为图像。

我找到了一篇很好的文章，介绍了如何在画布上应用类似墨色的效果并将其保存为图像。与其复制它，我会强调文章中更重要的内容。

修改画布图像：

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的出色文档，但在这里需要注意的重要部分是getImageData()调用。基本上，它将获取您定义区域（在上面的情况下，我们正在获取整个图像）中的所有像素值。然后，有了这些数据，我们可以遍历所有像素并根据需要进行更改。在sephia文章中，显然进行了一些有趣的调整，但您还可以进行灰度、模糊或任何其他必要的更改，并且有一个很棒的Github画布过滤器库。 如何保存画布图像：

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

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

document.body.appendChild(image);

上述脚本将选择您的画布（假设您已经完成了绘图），并创建一个图像元素。它使用toDataURL()生成一个url，您可以使用该url设置图像元素的源。在上面的示例中，图像元素附加到文档主体。您可以在MDN的canvas页面上查看更多信息。

- j.matz

Answer 2

我已经理解了您的问题。 我制作了这个程序，最终它是工作的。

步骤如下：
1. 上传图像（JPG/PNG）
2. 转换为画布
3. 使用CSS滤镜进行自定义。
4. 使用CamanJS进行渲染以保存为图像。
5.完成。

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

祝好运！

- Fachrizal Allolangi