Bagaimanakah Saya Boleh Mendapatkan URL Data Base64 Imej Menggunakan JavaScript?

Cara Dapatkan URL Data Imej Menggunakan JavaScript

Dalam pembangunan web, selalunya berguna untuk mengakses kandungan imej pada halaman web. Ini boleh dicapai melalui JavaScript, membenarkan pembangun memanipulasi dan menggunakan data imej tanpa perlu memuat turunnya secara berasingan.

Satu kes penggunaan sedemikian melibatkan mendapatkan perwakilan imej berkod base64 yang telah dimuatkan oleh penyemak imbas. Ini amat berfaedah apabila bekerja dengan skrip Greasemonkey dalam Mozilla Firefox.

Untuk mendapatkan URL data imej, elemen kanvas digunakan. Berikut ialah kod yang boleh anda gunakan:

function getBase64Image(img) {
  // Create a canvas with dimensions matching the image
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  // Copy the image data onto the canvas
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // Get the base64-encoded image
  const dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa kaedah ini hanya berfungsi untuk imej dari domain yang sama dengan halaman. Sebagai alternatif, anda boleh menentukan atribut crossOrigin="anonymous" pada teg imej dan memastikan pelayan menyokong CORS.

Ingat, kaedah ini menyediakan versi imej yang dikod semula, bukan fail asal. Untuk hasil yang sama, pertimbangkan untuk menggunakan kaedah lain seperti jawapan Kaiido.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan URL Data Base64 Imej Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!