如何保存在畫布上套用 CSS 濾鏡的圖片？

使用Canvas 中的CSS 濾鏡儲存影像

挑戰

要在客戶端套用CSS 濾鏡後儲存影像，請依照下列步驟操作：

1. 使用CSS濾鏡來增強image.
2. 將影像轉換為畫布元素。
3. 嘗試使用 var data = myCanvas.toDataURL("image/png"); 儲存影像。

但是，這種方法通常會導致在不應用濾鏡的情況下保存影像。

了解問題

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中文網其他相關文章！