Bagaimanakah Saya Boleh Menyimpan Imej daripada Kanvas dengan Penapis CSS Gunaan?

Menyimpan Imej daripada Kanvas dengan Penapis CSS

Anda telah menggunakan penapis CSS pada imej, tetapi apabila anda cuba menyimpannya, imej asal dikekalkan tanpa sebarang kesan. Untuk menyelesaikan masalah ini, terdapat dua pendekatan utama:

1. Gunakan Sifat Penapis Konteks (Firefox Sahaja)

Firefox menyokong sifat penapis konteks, yang membolehkan anda menggunakan penapis CSS secara terus pada konteks kanvas:

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

Ini menggunakan penapis dan kemudian simpan kanvas sebagai imej.

2. Gunakan Penapis Secara Manual (Semua Penyemak Imbas)

Walaupun sifat penapis konteks tidak disokong secara meluas, anda boleh menggunakan penapis secara manual pada kanvas menggunakan operasi peringkat piksel. Ini memerlukan penggunaan Modul Kesan Penapis Tahap 1 dan Spesifikasi Penapis SVG dan Matriks Warna:

// 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);

Anda akan mengulangi proses ini untuk setiap penapis yang anda mahu gunakan.

Ingat, pendekatan ini sama ada bergantung pada sifat khusus Firefox atau memerlukan manipulasi penapis manual. Jika sokongan penyemak imbas yang luas adalah penting, pertimbangkan untuk membangunkan penyelesaian bahagian belakang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Imej daripada Kanvas dengan Penapis CSS Gunaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!