使用CSS滤镜后保存图片

Question

我正在建设一个新的网站，让用户可以对图片应用过滤器（就像Instagram一样）。我将使用-webkit-filter来实现。

用户必须能够保存经过过滤的图像。有没有办法使用JavaScript来实现呢？

- Hugo Bessa

Answer 1

您无法直接保存图片，但可以在Canvas中渲染它们，然后从那里保存。

请参见：将带有图像的HTML5 Canvas保存为图像。

- Diodeus - James MacFarlane

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. Get the ImageData from canvas and apply the filter. Eg: I will apply grayscale filter to the ImageData below:

   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. Add an event and use the below code to trigger download

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

- Rahul Goyal

---

你的灰度滤镜函数和 CSS 滤镜没有什么关系，是吗？ - ganqqwerty