如何使用客戶端畫布應用 CSS 濾鏡來保存圖片？

如何使用 CSS 濾鏡從畫布儲存圖片

簡介

在客戶端對圖片套用 CSS 濾鏡可以增強其視覺吸引力。然而，在不使用伺服器端後端的情況下直接保存這些過濾後的圖像可能具有挑戰性。

逐步過程

1.建立 Canvas 上下文：

• 建立一個畫布元素 myCanvas 及其 2D 渲染

2.繪製原始影像：

• 使用 ctx.drawImage() 將原始影像 (image1) 繪製到畫布上。

3.應用 CSS 過濾器：

• 依照使用者輸入或偏好計算並連接 CSS 過濾器。
• 使用 $('#myCanvas').css 將過濾器設定到畫布('filter', filterVal) 應用組合的 CSS 過濾器。

4.取得過濾後的影像資料：

• 使用myCanvas.toDataURL("image/png") 將畫布位圖轉換為表示過濾後的影像的資料URL。

5。儲存或顯示過濾後的圖像：

• 將資料 URL 儲存在本機儲存中或使用 document.location.href = data 在新分頁或視窗中顯示過濾後的圖像。

常見問題及解決方案

問題：影像保存時沒有任何濾鏡。

解：檢查 ctx.filter 屬性是否存在。如果支持，請將 CSS 過濾器直接應用於上下文。如果不可用，請提供後備以手動套用過濾器。

瀏覽器相容性

ctx.filter 屬性不是官方 HTML Canvas 2D 規範的一部分，但在 Firefox 和其他支援的瀏覽器中可用。某些過濾器可能也不受所有瀏覽器的支援。有關詳細信息，請參閱最新的瀏覽器相容性文件。

範例

以下程式碼片段示範了這個過程：

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    img = document.getElementById("image1");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

var filterVal = "grayscale(0.5) blur(5px) brightness(110%)";

if (typeof ctx.filter !== "undefined") {
  ctx.filter = filterVal;
  ctx.drawImage(img, 0, 0);
} else {
  // TODO: Manually apply filters
}

var data = canvas.toDataURL("image/png");
localStorage.setItem("filteredImage", data);

以上是如何使用客戶端畫布應用 CSS 濾鏡來保存圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！