如何使用應用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這樣的圖像服務。