CSSフィルタを適用して画像を保存するには

Question

画像にCSSフィルタを適用して画像をディスクに保存する方法は不思議です。

例えば、私がイメージタグを持って、私はCSS

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

経由セピア効果を適用し、HTMLの画像タグに

私は保存することができますどのように

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

をクラスを適用することができますフィルタが適用された画像ですか？

Answer 1

イメージをキャンバス要素に書き込んで、JavaScriptで必要なフィルタを設定してからダウンロードすることができます。これは、ほとんどのモバイルブラウザでサポートされていないhttps://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

：だから、それはあなたがキャンバスの方法を選択する前にブラウザの互換性を確認し、この

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

ようなものになるだろう。

私はCloudinaryのようなイメージサービスを使用しています。