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

Question

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

例如，我有一个形象的标签，我可以通过CSS

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

应用棕褐色效果和类适用于图像标记在HTML

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

我如何保存应用了过滤器的图像？

Answer 1

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

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; 
 
};

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

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

Answer 2

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

它不支持大部分的移动浏览器。

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