與CSS webkitFilter帆布toDataURL

Question

我應用了CSS濾鏡在畫布像這樣：

canvas.style.webkitFilter = 'hue-rotate(90deg)'; 

如果我再嘗試使用定位元素的下載屬性下載畫布的內容：

var imgData = canvas.toDataURL('image/*'); 
link.download = 'Image'; 
link.href = imgData; 

下載的圖像不具有應用的過濾器。即使我使用getImageData來查看圖像數據或嘗試將圖像源設置爲圖像數據，也會出現同樣的問題。無論如何用JavaScript來獲取應用了CSS過濾器的畫布的圖像數據？

Answer 1

可以應用在畫布本身色相移。

例如，CamanJS庫有一些不錯的圖像過濾器：http://camanjs.com/

這是他們的文件：

色調

調整圖像的色調。它可以用於兩種顏色在一個 圖像以均勻方式移位。範圍是0到100

有時候，色相爲0的範圍表達了360。如果這就是你所使用的術語 ，認爲0至100代表色調偏移在0 百分比到360範圍。從CamanJS

示例代碼：

Caman("#image", function() { 
     this.hue(90).render(); 
});