Bagaimana untuk Menyimpan Imej dengan Penapis CSS Digunakan daripada Kanvas?

Menyimpan Imej dengan Penapis CSS daripada Kanvas

Cabaran

Untuk menyimpan imej selepas menggunakan penapis CSS pada sisi pelanggan, ikut langkah berikut:

1. Gunakan penapis CSS untuk meningkatkan imej.
2. Tukar imej ke elemen kanvas.
3. Cuba simpan imej dengan var data = myCanvas.toDataURL("image/png");.

Walau bagaimanapun, kaedah ini selalunya mengakibatkan penjimatan imej tanpa penapis yang digunakan.

Memahami Isu

Penapis CSS digunakan pada elemen itu sendiri, tetapi elemen kanvas mewakili peta bit yang tidak terjejas oleh CSS. Tanpa sifat penapis konteks, satu-satunya pilihan ialah menggunakan penapis secara manual pada piksel imej.

Penyelesaian

Jika sifat penapis konteks tersedia (disokong dalam kebanyakan penyemak imbas moden), anda boleh gunakan penapis secara terus:

var ctx = myCanvas.getContext('2d');

var filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
ctx.filter = filterVal;

Jika sifat penapis tidak tersedia, anda perlu melaksanakan kesan penapis pada tahap piksel secara manual. Rujuk Modul Kesan Penapis Tahap 1 dan Penapis SVG dan Matriks Warna untuk panduan.

Contoh Kod

Contoh ini menunjukkan cara menggunakan penapis menggunakan sifat penapis konteks:

// Create an image object
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "path/to/image.jpg";

function draw() {
  // Get the canvas and its context
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

  // Resize the canvas to match the image
  canvas.width = this.width;
  canvas.height = this.height;

  // Apply the filter using the `filter` property
  ctx.filter = "sepia(0.8)";

  // Draw the image onto the canvas
  ctx.drawImage(this, 0, 0);

  // Convert the canvas to a data URL
  var data = canvas.toDataURL("image/png");

  // Set the `src` attribute of an image element to the data URL
  document.querySelector("img").src = data;
}

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