Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menukar URL Imej ke Base64 dalam Javascript?

Bagaimana untuk Menukar URL Imej ke Base64 dalam Javascript?

Susan Sarandon
Susan Sarandonasal
2024-10-31 06:22:30249semak imbas

How to Convert an Image URL to Base64 in Javascript?

Cara Menukar URL Imej kepada Base64

Anda diberi URL imej daripada input imej dan perlu menukarnya kepada Base64 jadi anda boleh menghantarnya ke perkhidmatan web dan menyimpan imej secara setempat. Kod semasa yang anda gunakan tidak menukar URL kepada Base64.

Untuk mencapai ini, anda boleh menggunakan langkah berikut:

  1. Buat fungsi JavaScript untuk tukar imej kepada Base64:
<code class="javascript">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\/?[A-z]*;base64,/);
}</code>

Fungsi ini mengambil elemen imej (img) sebagai input dan mengembalikan rentetan berkod Base64.

  1. Dapatkan elemen imej daripada HTML anda:
<code class="html"><img id="imageid" src="https://www.google.de/images/srpr/logo11w.png"></code>
  1. Gunakan fungsi getBase64Image() untuk menukar imej kepada Base64:
<code class="javascript">var base64 = getBase64Image(document.getElementById("imageid"));</code>

Ini akan menukar imej kepada Base64 dan menyimpan hasilnya dalam pembolehubah base64. Anda kemudiannya boleh menghantar pembolehubah base64 ke perkhidmatan web anda untuk menyimpan imej secara setempat.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn