キャンバスから CSS フィルターを適用した画像を保存するにはどうすればよいですか?

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

チャレンジ

クライアント側で CSS フィルターを適用した後に画像を保存するには、次の手順に従います。

1. CSS フィルターを使用して画像を強化します。
2. 画像をキャンバス要素に変換します。
3. var data = myCanvas.toDataURL( "image/png");.

ただし、この方法では、フィルターが適用されずに画像が保存されることがよくあります。

問題を理解する

CSS フィルターは要素自体に適用されますが、canvas 要素は CSS の影響を受けないビットマップを表します。コンテキストのフィルター プロパティがない場合、唯一のオプションは、フィルターを画像ピクセルに手動で適用することです。

解決策

コンテキストのフィルター プロパティが利用可能な場合 (最新のブラウザーでサポートされている場合)、次のことができます。フィルターを直接適用します:

var ctx = myCanvas.getContext('2d');

var filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
ctx.filter = filterVal;

フィルター プロパティが利用できない場合は、ピクセル レベルでフィルター効果を手動で実装する必要があります。ガイダンスについては、「フィルター エフェクト モジュール レベル 1」および「SVG フィルターとカラー マトリックス」を参照してください。

コード例

この例では、コンテキストのフィルター プロパティを使用してフィルターを適用する方法を示します。

// Create an image object
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "path/to/image.jpg";

function draw() {
  // Get the canvas and its context
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

  // Resize the canvas to match the image
  canvas.width = this.width;
  canvas.height = this.height;

  // Apply the filter using the `filter` property
  ctx.filter = "sepia(0.8)";

  // Draw the image onto the canvas
  ctx.drawImage(this, 0, 0);

  // Convert the canvas to a data URL
  var data = canvas.toDataURL("image/png");

  // Set the `src` attribute of an image element to the data URL
  document.querySelector("img").src = data;
}

以上がキャンバスから CSS フィルターを適用した画像を保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。