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

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

画像に CSS フィルターを適用しましたが、保存しようとすると、元の画像は何の影響もなく保持されます。これを解決するには、主に次の 2 つのアプローチがあります。

1.コンテキスト フィルター プロパティを利用する (Firefox のみ)

Firefox はコンテキスト フィルター プロパティをサポートしており、CSS フィルターをキャンバス コンテキストに直接適用できます。

var ctx = myCanvas.getContext('2d');
ctx.filter = "grayscale(50%) blur(5px)";
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

これはフィルターを適用します。次に、キャンバスを画像として保存します。

2.フィルタを手動で適用する (すべてのブラウザ)

コンテキスト フィルタ プロパティは広くサポートされていませんが、ピクセル レベルの操作を使用してキャンバスにフィルタを手動で適用できます。これには、フィルター エフェクト モジュール レベル 1 と SVG フィルターおよびカラー マトリックスの仕様を使用する必要があります。

// Calculate filter matrix for grayscale
var greyMatrix = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0, 0, 0, 1, 0
];

// Apply grayscale filter to canvas
var imgData = ctx.getImageData(0, 0, myCanvas.width, myCanvas.height);
for (var i = 0; i < imgData.data.length; i += 4) {
  var r = imgData.data[i];
  var g = imgData.data[i + 1];
  var b = imgData.data[i + 2];
  imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] = (r * greyMatrix[0] + g * greyMatrix[1] + b * greyMatrix[2]);
}
ctx.putImageData(imgData, 0, 0);

適用するフィルターごとにこのプロセスを繰り返します。

これらのアプローチは次のいずれかであることを覚えておいてください。 Firefox 固有のプロパティに依存するか、手動のフィルター操作が必要です。幅広いブラウザーのサポートが重要な場合は、バックエンド ソリューションの開発を検討してください。

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