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

Question

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

制作图片编辑器很容易,但是是否可以使用过滤器保存或导出图像看起来非常困难.

我最初对@ niklasvh的html2canvas很有希望.不幸的是,它不能捕获大多数CSS3属性,更不用说过滤效果了.

如果有人有解决方案或遗憾的是,知道这是不可能的,那将非常感谢!谢谢!

Answer 1

你不是,我知道,能够将CSS应用于HTML5 canvas元素中的图形(因为它们不是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) {
    ...
}

为了访问某些canvas API,您需要使用上面的JavaScript在画布上激活2D上下文.MDN有一些关于API的一些很好的文档,可以使用上下文对象,但这里要注意的重要部分是getImageData()调用.基本上,它将获取您定义的区域中的所有像素值(在上面的例子中,我们抓取整个图像).然后,有了这些数据,我们可以遍历所有像素并根据需要更改它们.在棕褐色文章中,它显然做了一些有趣的调整,但你也可以根据需要进行灰度,模糊或任何其他更改,并且在Github上有一个非常棒的画布过滤器库.

如何保存画布图像:

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

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

document.body.appendChild(image);

上面的脚本将选择你的画布(假设你已经完成了你的绘图)并创建了一个图像元素.它们用于toDataURL()生成可用于在图像元素上设置源的URL.在上面的示例中,图像元素被附加到文档正文.您可以在MDN的画布页面上查看更多信息.