Question

我想知道如何将CSS过滤器应用于图像，然后将图像保存到磁盘。

例如，我有一个图像标签，我可以通过CSS应用棕褐色效果

img.sepia{
  filter: sepia(20%);
}

将该类应用于HTML

中的图像标记

<img src="img.png" class="sepia" />

如何在应用过滤器的情况下保存该图像？

Answer 1

您可以将图像写入canvas元素，在javascript中设置所需的过滤器，然后下载。所以它会是这样的

＆＃13;

var canvas = document.getElementById('image');
var ctx = canvas.getContext('2d');
ctx.filter = "sepia(20%)";
var img = document.getElementById("dataimage");
ctx.drawImage(img,0,0, canvas.width, canvas.height);

var downloadFile = document.getElementById('download');
downloadFile.addEventListener('click', download, false);


function download() {
   var dt = canvas.toDataURL('image/jpeg');
   this.href = dt;
};

＆＃13;

img{
  width:400px;
  height:400px;
}

＆＃13;

<img src="" id="dataimage" />
<canvas id="image" width="400px" height="400px"></canvas>
<a id="download">Download image</a>

＆＃13;

Answer 2

在选择画布方法之前检查浏览器兼容性：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

大多数移动浏览器都不支持此功能。

我使用像Cloudinary这样的图像服务。

如何使用CSS过滤器保存图像

2 个答案: