如何在沒有伺服器的情況下保存在畫布上套用 CSS 濾鏡的圖片？

在沒有後端的畫布上保存應用了CSS 濾鏡的圖像

要保存在客戶端應用了CSS 濾鏡的圖像，請按照以下步驟操作：

轉換為畫布並提取圖像資料

1. 使用以下命令將圖像轉換為畫布document.getElementById("myCanvas").getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);.
2. 使用myCanvas使用應用的濾鏡提取影像資料。 toDataURL("image/png").

套用 CSS 過濾器Context

但是，如果不支援上下文過濾屬性，則圖片將儲存為無效果。若要解決此問題：

1. 使用 typeof ctx.filter === "undefined" 檢查 context.filter 屬性是否存在。
2. 如果支持，請使用 ctx 應用 CSS 過濾器。在將影像繪製到畫布之前，filter = "filterValue"。
3. 如果不支持，請使用未顯示的替代方法手動應用過濾器這裡。

範例

此範例使用 filter 屬性將棕褐色濾鏡套用至影像。如果不支援，它將使用後備（未顯示）。

var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d");

  canvas.width = this.width;
  canvas.height = this.height;

  // filter
  if (typeof ctx.filter === "undefined") {
    ctx.filter = "sepia(0.8)";
    ctx.drawImage(this, 0, 0);
  } else {
    ctx.drawImage(this, 0, 0);
    // TODO: manually apply filter here.
  }

  document.querySelector("img").src = canvas.toDataURL();
}

請記住，CSS 濾鏡僅適用於元素的外觀，而不適用於實際的點陣圖資料。若要套用實際的濾鏡，如果濾鏡屬性不可用，請在像素層級使用點陣圖。

以上是如何在沒有伺服器的情況下保存在畫布上套用 CSS 濾鏡的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！