使用CSS滤镜后保存图像

Save images after using CSS filter

本文关键字：保存 图像 滤镜 CSS 使用      更新时间：2023-09-26

我正在建立一个新的网站，让用户对图像应用过滤器(就像Instagram一样)。我将使用-webkit-filter。

用户必须能够保存过滤后的图像。有什么方法可以用JavaScript实现吗?

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

参见:Save HTML5 canvas with images as a image

没有直接/直接的方法来使用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;
   }
}
    • 相关文章：