使用CSS过滤器保存图像

Question

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

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

Answer 1

您不能直接保存图像，但可以在“画布”中渲染它们，然后从中保存。

参见：Save HTML5 canvas with images as an image

Answer 2

有一个图像输出与CSS滤镜没有直接/直接的方法。

遵循保存/导出与施加在其上-webkit滤波器图片下面的步骤：
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; 
    } 
}