バックエンドを使用せずにクライアント側の CSS フィルターが適用された画像を保存するにはどうすればよいですか?

クライアント側で適用された CSS フィルターを使用して画像を保存する

問題:

方法クライアント側で CSS フィルターを使用した後、画像を保存できますか? backend?

Background:

多くの開発者は、クライアント側で CSS フィルターが適用された画像を保存するときに問題に遭遇します。フィルターを適用し、キャンバスに変換し、toDataURL で保存するという一般的なワークフローに従っているにもかかわらず、結果には意図した効果が欠けていることがよくあります。

解決策:

解決の鍵この問題は、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 中国語 Web サイトの他の関連記事を参照してください。