使用 CSS 过滤器后保存图像答案

【问题标题】：Save images after using CSS filter使用 CSS 过滤器后保存图像
【发布时间】：2013-03-18 03:30:35
【问题描述】：

我正在建立一个新网站，让用户可以对图像应用过滤器（就像 Instagram 一样）。我将为此使用-webkit-filter。

用户必须能够保存过滤后的图像。有什么方法可以使用 JavaScript 做到这一点？

【问题讨论】：

【解决方案1】：

没有使用 CSS 过滤器导出图像的直接/直接方法。

按照以下步骤保存/导出应用了 -webkit-filter 的图像：
1. 将图像渲染到画布上：

var canvas = document.createElement('canvas');
canvas.id="canvasPhoto";
canvas.width = imageContaainer.width;
canvas.height = imageContaainer.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(imageContaainer, 0, 0, canvas.width, canvas.height);

从画布中获取 ImageData 并应用过滤器。例如：我将对下面的 ImageData 应用灰度滤镜：

function grayscale(ctx) {
var pixels = ctx.getImageData(0,0,canvas.width, canvas.height);
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
    var r = d[i];
    var g = d[i+1];
    var b = d[i+2];
    var v = 0.2126*r + 0.7152*g + 0.0722*b;
    d[i] = d[i+1] = d[i+2] = v
}
context.putImageData(pixels, 0, 0);
}

添加事件并使用以下代码触发下载

function download(canvas) {
   var data = canvas.toDataURL("image/png");
   if (!window.open(data)) 
   {
       document.location.href = data;
   }
}

【讨论】：

【解决方案2】：

您不能直接保存图像，但可以在 Canvas 中渲染它们，然后从那里保存。

见：Save HTML5 canvas with images as an image

【讨论】：

非常感谢！会检查的。