サーバーなしでキャンバスに 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 === "unknown" を使用して context.filter プロパティの存在を確認します。
2. サポートされている場合は、ctx を使用して CSS フィルターを適用します。キャンバスに画像を描画する前に、filter = "filterValue" を指定します。
3. サポートされていない場合は、表示されていない代替方法を使用してフィルターを手動で適用します。

例

この例では、フィルター プロパティを使用して画像にセピア フィルターを適用します。サポートされていない場合は、フォールバック (表示されていません) が使用されます。

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