Bagaimanakah Saya Boleh Menyimpan Imej dengan Penapis CSS Bahagian Pelanggan Digunakan Tanpa Bahagian Belakang?

Menyimpan Imej dengan Penapis CSS Digunakan pada Bahagian Pelanggan

Isu:

Bagaimana bolehkah anda menyimpan imej selepas menggunakan penapis CSS pada bahagian klien tanpa a bahagian belakang?

Latar Belakang:

Ramai pembangun menghadapi masalah apabila menyimpan imej dengan penapis CSS digunakan pada bahagian klien. Walaupun mengikut aliran kerja biasa menggunakan penapis, menukar kepada kanvas dan menyimpan dengan toDataURL, hasilnya selalunya tidak mempunyai kesan yang dimaksudkan.

Penyelesaian:

Kunci untuk menyelesaikan masalah ini terletak pada penggunaan sifat penapis objek konteks, yang membolehkan anda menggunakan penapis CSS terus ke peta bit. Sifat ini belum lagi menjadi bahagian rasmi standard web tetapi telah mendapat sokongan yang lebih meluas sejak kebelakangan ini.

Pelaksanaan:

Berikut ialah pelaksanaan ringkas yang menggabungkan sifat penapis :

// Check if the filter property exists
if (typeof ctx.filter !== "undefined") {
  // Apply the desired CSS filter
  ctx.filter = "sepia(0.8)";
  // Draw the image onto the canvas with the applied filter
  ctx.drawImage(this, 0, 0);
} else {
  // Fallback approach (not shown) for browsers without the filter property
}

Tambahan Konteks:

• CSS dan DOM beroperasi secara berasingan daripada peta bit kanvas. Penapis CSS mempengaruhi elemen (portal paparan kepada peta bit), bukan peta bit itu sendiri.
• Menggunakan penapis pada imej secara manual memerlukan manipulasi tahap piksel tanpa ketiadaan sifat penapis.

• Sumber untuk pengiraan penapis:

  • Tahap Modul Kesan Penapis 1
  • Penapis SVG dan Matriks Warna

Contoh:

Contoh ini menggunakan penapis sepia pada imej pada kanvas dan ekstrak hasilnya sebagai imej:

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    img = new Image();

img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  canvas.width = this.width;
  canvas.height = this.height;

  if (typeof ctx.filter !== "undefined") {
    ctx.filter = "sepia(0.8)";
    ctx.drawImage(this, 0, 0);
  } else {
    ctx.drawImage(this, 0, 0);
    // TODO: Manually apply filter here.
  }

  document.querySelector("img").src = canvas.toDataURL();
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Imej dengan Penapis CSS Bahagian Pelanggan Digunakan Tanpa Bahagian Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!