クライアント側キャンバスを使用して CSS フィルターが適用された画像を保存する方法

CSS フィルターを使用してキャンバスから画像を保存する方法

はじめに

クライアント側で CSS フィルターを画像に適用すると、視覚的な魅力を高めることができます。ただし、これらのフィルタリングされた画像をサーバー側のバックエンドを使用せずに直接保存するのは困難な場合があります。

段階的なプロセス

1.キャンバス コンテキストを作成します。

• キャンバス要素 myCanvas とその 2D レンダリング コンテキスト ctx を作成します。

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 中国語 Web サイトの他の関連記事を参照してください。