使用CSS過濾器保存圖像

Question

我正在構建一個新的網站，可以讓用戶對圖像應用過濾器（就像Instagram一樣）。我將使用-webkit-filter。

用戶必須能夠保存已過濾的圖像。有什麼辦法可以使用JavaScript來做到這一點？

Answer 1

您不能直接保存圖像，但可以在「畫布」中渲染它們，然後從中保存。

參見：Save HTML5 canvas with images as an image

Answer 2

有一個圖像輸出與CSS濾鏡沒有直接/直接的方法。

遵循保存/導出與施加在其上-webkit濾波器圖片下面的步驟：
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; 
    } 
}