捕捉/保存/导出应用了CSS滤镜效果的图像

Capture/save/export an image with CSS filter effects applied

本文关键字：滤镜 图像 CSS 保存 应用 捕捉      更新时间：2023-09-26

我正在制作一个简单的图片编辑器，使用CSS3滤镜效果(饱和度，深褐色，对比度等)

制作图片编辑器是容易的部分，但是是否可以保存或导出应用滤镜的图像似乎非常困难。

我原本对@niklasvh的html2canvas抱有很高的希望。不幸的是，它不能捕获大多数CSS3属性，更不用说过滤器效果了。

如果有人有一个解决方案，或者可悲的是，明确的知识，这只是不可能的，这将是非常感激!谢谢!

你不能，我知道，能够应用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()调用。基本上，它会抓取你所定义区域的所有像素值(在上面的例子中，我们抓取整个图像)。然后，有了这些数据，我们可以遍历所有像素并根据需要更改它们。在sepia的文章中，它显然做了一些有趣的调整，但你也可以做灰度，模糊，或任何其他必要的改变，Github上有一个很棒的画布过滤器库。

如何保存画布图像:

var canvas = document.getElementById('canvasElementId'),
    image = document.createElement("img");
image.src = canvas.toDataURL('image/jpeg');
document.body.appendChild(image);
上面的脚本将选择您的画布(假设您已经完成了绘图)并创建一个图像元素。如果它们使用toDataURL()生成一个url，您可以使用该url在图像元素上设置源。在上面的例子中，image元素被附加到文档主体。您可以在MDN的画布页面查看更多信息。

我知道你的答案了。我编写了这个程序，终于可以工作了。

这些步骤是:
1. 上传图片(JPG/PNG)
2. 转换为画布
3.自定义CSS过滤器。
4. 渲染使用camanJS保存为图像。
5. 做。

你也可以通过修改过滤器的值来重置效果值。

祝你好运!

相关文章：