如何在沒有後端的情況下保存應用了客戶端 CSS 濾鏡的圖片？-css教學-PHP中文網

如何在沒有後端的情況下保存應用了客戶端 CSS 濾鏡的圖片？

Susan Sarandon

發布： 2024-11-19 00:23:02

原創

294 人瀏覽過

How Can I Save an Image with Client-Side CSS Filters Applied Without a Backend?

在客戶端套用CSS 濾鏡儲存影像

問題：

背景：

許多開發人員在保存應用了CSS過濾器的圖像時遇到問題在客戶端。儘管遵循應用濾鏡、轉換為畫布並使用 toDataURL 保存的典型工作流程，但結果往往達不到預期的效果。

解決方案：

解決的關鍵這個問題在於使用上下文物件的filter屬性，它允許您將CSS過濾器直接應用於位圖。該屬性尚未成為 Web 標準的正式部分，但近年來獲得了更廣泛的支援。

實現：

這是一個包含過濾器屬性的簡潔實現:

// Check if the filter property exists
if (typeof ctx.filter !== "undefined") {
  // Apply the desired CSS filter
  ctx.filter = "sepia(0.8)";
  // Draw the image onto the canvas with the applied filter
  ctx.drawImage(this, 0, 0);
} else {
  // Fallback approach (not shown) for browsers without the filter property
}

登入後複製

其他上下文：

CSS 和DOM 與畫布點陣圖分開操作。 CSS 濾鏡會影響元素（點陣圖的檢視入口），而不是點陣圖本身。
在沒有濾鏡屬性的情況下手動將濾鏡套用到影像需要像素級操作。
用於濾鏡計算的資源：
- 濾鏡效果模組等級1
- SVG 濾鏡與色彩矩陣

範例：

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    img = new Image();

img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  canvas.width = this.width;
  canvas.height = this.height;

  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 濾鏡的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！