Bagaimana untuk Mencapai Penskalaan Kecil Imej Berkualiti Tinggi dalam Penyemak Imbas Menggunakan Kanvas HTML5?

Saiz kecil (sampel kecil) imej dalam penyemak imbas untuk kualiti tinggi

Reduxrespot:

Dalam penyemak imbas Apabila mengecilkan imej menggunakan elemen kanvas html5, saya mendapati bahawa kualiti imej adalah sangat rendah. Selepas beberapa penyelidikan, saya mendapati bahawa melumpuhkan interpolasi dalam

Amalan Terbaik

Pensampelan turun satu langkah

Disyorkan untuk situasi di mana anda perlu mengecilkan imej yang besar kepada yang kecil imej Gunakan pensampelan turun satu langkah. Berikut ialah langkah-langkahnya:

1. Gunakan kaedah drawImage() untuk melukis imej asal pada kanvas bersaiz kecil.
2. Gunakan getImageData() untuk mendapatkan data imej yang dikurangkan.
3. Gunakan putImageData() untuk menarik data yang dikurangkan pada kanvas baharu.

Dicapai dengan contoh kod berikut:

const originalImage = new Image();
originalImage.onload = () => {
  const originalCanvas = document.createElement('canvas');
  originalCanvas.width = desiredWidth;
  originalCanvas.height = desiredHeight;
  const originalCtx = originalCanvas.getContext('2d');
  originalCtx.drawImage(originalImage, 0, 0, desiredWidth, desiredHeight);

  const scaledData = originalCtx.getImageData(0, 0, desiredWidth, desiredHeight);
  const scaledCanvas = document.createElement('canvas');
  scaledCanvas.width = desiredWidth;
  scaledCanvas.height = desiredHeight;
  const scaledCtx = scaledCanvas.getContext('2d');
  scaledCtx.putImageData(scaledData, 0, 0);
};

Pensampelan turun berbilang langkah

Jika pensampelan turun satu langkah tidak mencukupi kualiti , anda boleh menggunakan pensampelan turun berbilang langkah. Ini dicapai dengan berulang kali melakukan pensampelan turun satu langkah menggunakan nisbah yang lebih kecil.

Berikut ialah contoh kod untuk pensampelan turun dua langkah:

const originalImage = new Image();
originalImage.onload = () => {
  // 第一步：缩小 50%
  const firstCanvas = document.createElement('canvas');
  firstCanvas.width = originalImage.width / 2;
  firstCanvas.height = originalImage.height / 2;
  const firstCtx = firstCanvas.getContext('2d');
  firstCtx.drawImage(originalImage, 0, 0, firstCanvas.width, firstCanvas.height);

  // 第二步：缩小 50%
  const secondCanvas = document.createElement('canvas');
  secondCanvas.width = firstCanvas.width / 2;
  secondCanvas.height = firstCanvas.height / 2;
  const secondCtx = secondCanvas.getContext('2d');
  secondCtx.drawImage(firstCanvas, 0, 0, secondCanvas.width, secondCanvas.height);

  const finalImage = new Image();
  finalImage.src = secondCanvas.toDataURL();
};

Isu kabur

Pensampelan turun berbilang langkah boleh menyebabkan imej kabur. Untuk menyelesaikan masalah ini, teknik berikut boleh digunakan:

• Mengasah imej: Penapis konvolusi atau teknik mengasah lain boleh digunakan untuk meningkatkan tepi imej.
• Gunakan algoritma interpolasi berkualiti tinggi: Contohnya interpolasi bilinear atau bikubik boleh memberikan kualiti yang lebih baik daripada interpolasi jiran terdekat.
• Lakukan pensampelan turun dalam langkah yang lebih kecil: Sebagai contoh, lakukan pensampelan bawah 3 langkah, setiap langkah mengurangkan saiz sebanyak 33%, bukannya pensampelan 2 langkah, setiap langkah mengurangkan saiz sebanyak 50 % .

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penskalaan Kecil Imej Berkualiti Tinggi dalam Penyemak Imbas Menggunakan Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!