要在客戶端套用CSS 濾鏡後儲存影像，請依照下列步驟操作：
但是，這種方法通常會導致在不應用濾鏡的情況下保存影像。
CSS 過濾器應用於元素本身，但畫布元素表示不受 CSS 影響的點陣圖。如果沒有上下文的濾鏡屬性，唯一的選擇就是手動將濾鏡套用到影像像素。
如果上下文的過濾器屬性可用（大多數現代瀏覽器都支援），您可以直接套用濾鏡：
var ctx = myCanvas.getContext('2d');
var filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
ctx.filter = filterVal;如果濾鏡屬性不可用，則需要手動實現像素級別的濾鏡效果。請參閱濾鏡效果模組等級 1 和 SVG 濾鏡和色彩矩陣以取得指導。
此範例示範如何使用上下文的濾鏡屬性套用濾鏡：
// Create an image object
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "path/to/image.jpg";
function draw() {
// Get the canvas and its context
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
// Resize the canvas to match the image
canvas.width = this.width;
canvas.height = this.height;
// Apply the filter using the `filter` property
ctx.filter = "sepia(0.8)";
// Draw the image onto the canvas
ctx.drawImage(this, 0, 0);
// Convert the canvas to a data URL
var data = canvas.toDataURL("image/png");
// Set the `src` attribute of an image element to the data URL
document.querySelector("img").src = data;
}以上是如何保存在畫布上套用 CSS 濾鏡的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
