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) {
    ...
}

为了访问某些canvas API，您需要使用上面的JavaScript在画布上激活2D上下文。 MDN提供了一些有关context object可用的API的精彩文档，但此处需要注意的重要部分是getImageData()调用。基本上，它将获取您定义的区域中的所有像素值（在上面的例子中，我们抓取整个图像）。然后，有了这些数据，我们可以遍历所有像素并根据需要更改它们。在sepia article中，它显然会进行一些有趣的调整，但您也可以根据需要进行灰度，模糊或任何其他更改，并且有一个很棒的canvas filters library on Github就可以了。

如何保存画布图像：

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渲染保存为图像。
完成了。

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

祝你好运！

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

2 个答案: