Bagaimana untuk Menukar URL Imej kepada Base64 Menggunakan Elemen Kanvas?

Cara Menukar URL Imej kepada Base64

Dalam senario di mana anda perlu memperoleh URL imej dan menggunakannya untuk penyimpanan atau pemprosesan selanjutnya, menukarnya kepada Perwakilan Base64 menjadi penting. Mari kita teroka kaedah yang berkesan untuk mencapai penukaran ini:

Menggunakan Elemen Kanvas

Pendekatan ini bergantung pada elemen kanvas HTML5, yang disokong secara meluas dan membenarkan manipulasi kanvas dalam JavaScript:

<code class="html"><img id="imageid" src="https://example.com/image.jpg"></code>

<code class="javascript">// Created by Md. Hasan Mahmud
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|jpeg|svg)*;base64,/, "");
}

var base64Image = getBase64Image(document.getElementById("imageid"));</code>

Dengan memanfaatkan canvas.toDataURL(), imej dilukis pada kanvas dan datanya ditukar menjadi rentetan Base64. Rentetan yang terhasil mengandungi data imej, diawali dengan jenis MIME.

Dalam kod kami, kami memperhalusi rentetan Base64 dengan menggunakan kaedah ganti dengan ungkapan biasa yang mengalih keluar jenis MIME dan ",":

<code class="javascript">var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg|svg)*;base64,/, "");</code>

Ini membolehkan kami mendapatkan rentetan Base64 tulen, sedia untuk sebarang tujuan yang anda perlukan, seperti menghantarnya ke perkhidmatan web atau menyimpannya secara setempat.

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