Bagaimanakah Saya Boleh Mendapatkan Data Imej Berkod Base64 daripada Imej Sudah Dimuatkan dalam JavaScript?

Mengekstrak URL Data Imej dalam JavaScript

Masalah:

Bagaimana anda boleh mendapatkan base64- kandungan yang dikodkan daripada imej yang telah dimuatkan dalam pelayar menggunakan tag HTML, tanpa perlu memuat turun semula?

Penyelesaian untuk Greasemonkey dan Firefox:

Untuk mengekstrak kandungan imej yang dimuatkan sepenuhnya menggunakan Greasemonkey dan Firefox, laksanakan langkah berikut:

1. Buat Kanvas: Hasilkan elemen kanvas dengan dimensi sepadan dengan saiz imej.
2. Salin Data Imej: Gunakan fungsi drawImage untuk memindahkan data imej ke kanvas.
3. Dapatkan URL Data: Gunakan fungsi toDataURL untuk mendapatkan semula data imej yang dikodkan base64 daripada kanvas.

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Nota: Penyelesaian ini menganggap data imej tersedia daripada domain yang sama dengan halaman atau mempunyai atribut crossOrigin="anonymous" didayakan dengan sokongan pelayan untuk CORS. Selain itu, imej yang dikembalikan mungkin dikodkan semula.

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