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

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 的好文章.我不会复制它，而是突出显示这篇文章的主要内容。

修改 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 有一些很棒的 AP​​I 文档，您可以通过 context object 获得这些文档。 ，但这里要注意的重要部分是 getImageData() 调用。基本上，它会抓取您定义区域中的所有像素值(在上面的例子中，我们抓取了整个图像)。然后，有了这些数据，我们可以遍历所有像素并根据需要更改它们。在sepia article ，它显然在进行一些有趣的调整，但您也可以根据需要进行灰度、模糊或任何其他更改，并且有一个很棒的 canvas filters library on Github仅此而已。

如何保存 Canvas 图像:

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

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

document.body.appendChild(image);

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