javascript - 使用 CSS 过滤器后保存图像

Question

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

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

Answer 1

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

请参阅：将带有图像的 HTML5 画布保存为图像

Answer 2

没有直接/直接的方法可以使用 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);

2. 从画布中获取 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);
   }
   

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

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