Bagaimana untuk Menyimpan Imej dengan Penapis CSS Digunakan Menggunakan Kanvas Sisi Pelanggan?

Cara Menyimpan Imej dari Kanvas dengan Penapis CSS

Pengenalan

Menggunakan penapis CSS pada imej di sisi pelanggan boleh meningkatkan daya tarikan visual mereka. Walau bagaimanapun, menyimpan terus imej yang ditapis ini boleh menjadi mencabar tanpa menggunakan bahagian belakang sebelah pelayan.

Proses Langkah demi Langkah

1. Cipta Konteks Kanvas:

• Buat elemen kanvas myCanvas dan ctx konteks pemaparan 2Dnya.

2. Lukis Imej Asal:

• Lukis imej asal (imej1) pada kanvas menggunakan ctx.drawImage().

3. Gunakan Penapis CSS:

• Kira dan gabungkan penapis CSS berdasarkan input atau pilihan pengguna.
• Tetapkan penapis pada kanvas menggunakan $('#myCanvas').css ('filter', filterVal) untuk menggunakan gabungan CSS penapis.

4. Dapatkan Data Imej Yang Ditapis:

• Gunakan myCanvas.toDataURL("image/png") untuk menukar peta bit kanvas kepada URL Data yang mewakili imej yang ditapis.

5. Simpan atau Paparkan Imej Yang Ditapis:

• Simpan URL Data dalam storan setempat atau gunakan document.location.href = data untuk memaparkan imej yang ditapis dalam tab atau tetingkap baharu.

Isu dan Penyelesaian Biasa

Isu: Imej disimpan tanpa sebarang penapis.

Penyelesaian: Semak kewujudan sifat ctx.filter. Jika disokong, gunakan penapis CSS terus ke konteks. Jika tidak tersedia, berikan sandaran untuk menggunakan penapis secara manual.

Keserasian Penyemak Imbas

Sifat ctx.filter bukan sebahagian daripada spesifikasi HTML Canvas 2D rasmi tetapi tersedia dalam Firefox dan penyemak imbas sokongan yang lain . Sesetengah penapis juga mungkin tidak disokong merentas semua penyemak imbas. Rujuk dokumentasi keserasian penyemak imbas terkini untuk mendapatkan butiran.

Contoh

Coretan kod berikut menunjukkan proses:

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    img = document.getElementById("image1");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

var filterVal = "grayscale(0.5) blur(5px) brightness(110%)";

if (typeof ctx.filter !== "undefined") {
  ctx.filter = filterVal;
  ctx.drawImage(img, 0, 0);
} else {
  // TODO: Manually apply filters
}

var data = canvas.toDataURL("image/png");
localStorage.setItem("filteredImage", data);

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Imej dengan Penapis CSS Digunakan Menggunakan Kanvas Sisi Pelanggan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!