Bagaimanakah Saya Boleh Menyimpan Imej dengan Penapis CSS Digunakan pada Kanvas Tanpa Pelayan?

Menyimpan Imej dengan Penapis CSS Gunaan pada Kanvas Tanpa Bahagian Belakang

Untuk menyimpan imej dengan penapis CSS yang digunakan pada sisi pelanggan, ikut langkah berikut:

Tukar kepada Kanvas dan Ekstrak Data Imej

1. Tukar imej kepada kanvas menggunakan document.getElementById("myCanvas").getContext("2d").drawImage(imej, 0, 0, canvas.width, canvas.height);.
2. Ekstrak data imej dengan penapis yang digunakan menggunakan myCanvas.toDataURL("image/png").

Gunakan Penapis CSS kepada Konteks

Walau bagaimanapun, imej akan disimpan tanpa kesan jika sifat penapis konteks tidak disokong. Untuk menangani perkara ini:

1. Semak kewujudan sifat context.filter menggunakan typeof ctx.filter === "undefined".
2. Jika disokong, gunakan penapis CSS menggunakan ctx. filter = "filterValue" sebelum melukis imej ke kanvas.
3. Jika tidak disokong, gunakan penapis secara manual menggunakan alternatif kaedah tidak ditunjukkan di sini.

Contoh

Contoh ini menggunakan penapis sepia pada imej menggunakan sifat penapis. Jika tidak disokong, ia akan menggunakan sandaran (tidak ditunjukkan).

var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d");

  canvas.width = this.width;
  canvas.height = this.height;

  // filter
  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();
}

Ingat, penapis CSS hanya digunakan pada penampilan elemen, bukan data bitmap sebenar. Untuk menggunakan penapis sebenar, gunakan peta bit pada tahap piksel jika sifat penapis tidak tersedia.

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