Bagaimana untuk Menukar URL Imej ke Base64 Menggunakan Javascript?

Menukar URL Imej kepada Base64

Dalam senario pembangunan web, selalunya perlu menghantar imej untuk pemprosesan atau penyimpanan tanpa mempunyai akses kepada fail imej sebenar. Untuk memudahkan ini, kami boleh menukar URL imej kepada format Base64, membolehkan penghantaran yang cekap.

Dalam kes khusus anda, anda mempunyai URL imej (cth., "https://example.com/image. png") diperoleh daripada input pengguna. Untuk menukarnya kepada Base64 menggunakan JavaScript:

1. Buat elemen imej baharu: Elemen imej ini akan berfungsi sebagai perwakilan sementara imej untuk diproses.

<code class="javascript">const img = new Image();
img.src = imageUrl; // Replace imageUrl with the URL you obtained</code>

2. Lukis imej pada kanvas: Langkah ini mencipta salinan sempurna piksel imej pada kanvas.

<code class="javascript">const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);</code>

3. Tukar kanvas kepada Base64: Gunakan kaedah toDataURL() untuk menukar kanvas kepada rentetan berkod Base64.

<code class="javascript">const base64Image = canvas.toDataURL("image/png");</code>

4. Alih keluar awalan URI data: Kaedah toDataURL() mengembalikan URI data yang merangkumi maklumat tambahan. Alih keluar awalan dengan ungkapan biasa untuk mendapatkan data Base64 tulen.

<code class="javascript">const regex = /^data:image\/[A-z]*;base64,/;
const base64Data = base64Image.replace(regex, "");</code>

Kini, base64Data mengandungi perwakilan imej yang dikodkan Base64. Anda boleh memindahkan rentetan ini ke perkhidmatan web anda untuk pemprosesan selanjutnya atau menyimpannya secara setempat pada sistem anda.

Atas ialah kandungan terperinci Bagaimana untuk Menukar URL Imej ke Base64 Menggunakan Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!