CSS フィルターを適用したキャンバスから画像を保存するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-19 15:18:03

オリジナル

428 人が閲覧しました

How Can I Save Images from a Canvas with Applied CSS Filters?

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