19

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

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

我原本对@niklasvh 的 html2canvas 寄予厚望。不幸的是，它不能捕获大多数 CSS3 属性，更不用说滤镜效果了。

如果有人有解决方案或可悲的是，这是不可能的明确知识，将不胜感激！谢谢！

4

2 回答 2

6

我知道，您不能将 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 的很棒的文档，您可以使用context object，但这里要注意的重要部分是getImageData()调用。基本上，它将抓取您定义的区域中的所有像素值（在上面的例子中，我们抓取的是整个图像）。然后，有了这些数据，我们可以遍历所有像素并根据需要更改它们。在sepia 文章中，它显然做了一些有趣的调整，但您也可以根据需要进行灰度、模糊或任何其他更改，Github 上有一个很棒的画布过滤器库。

如何保存画布图像：

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

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

document.body.appendChild(image);

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

于 2013-06-15T23:07:22.110 回答
3

我得到了你的答案。我做了这个程序，终于成功了。

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

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

祝你好运！

于 2015-08-14T08:01:56.650 回答