Tukar base64 kepada javascript imej

Dalam pembangunan bahagian hadapan, kami selalunya perlu menukar rentetan berkod Base64 kepada imej untuk dipaparkan pada halaman web. Penukaran ini boleh membantu kami memuatkan imej secara dinamik dan memaparkannya pada halaman tanpa sokongan pelayan. Seterusnya, artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menukar rentetan berkod Base64 kepada imej.

1. Prinsip pengekodan Base64

Pengekodan Base64 ialah kaedah pengekodan yang menukar data binari kepada aksara ASCII yang boleh dicetak. Ia menukar setiap tiga bait kepada empat aksara dan menambah tanda "=" pada akhir (jika perlu).

Sebagai contoh, nombor perduaan 16-bit 1111010100110000 boleh ditukar menjadi rentetan berkod Base64 "5q0=". Proses penukaran adalah seperti berikut:

1. Bahagikan 11110101 kepada dua nombor enam digit: 111101 dan 010011.
2. Tambah dua 0 pada penghujung dua nombor enam digit ini untuk menjadi 11110100 dan 01001100.
3. Gabungkan dua tatasusunan lapan bit ini menjadi nombor binari 16 bit: 1111010001001100.
4. Tukar nombor binari ini kepada perpuluhan dan dapatkan 61676.
5. Tukar 61676 kepada aksara berkod Base64 "5q0=".

2. Tukar pengekodan Base64 kepada imej dalam JavaScript

Dalam pembangunan bahagian hadapan, kami sering menggunakan permintaan tak segerak Ajax untuk mendapatkan rentetan yang dikodkan Base64, dan kemudian menukarnya kepada imej dan dipaparkan pada halaman web. Berikut ialah langkah tentang cara menukar rentetan berkod Base64 kepada imej menggunakan JavaScript:

1. Buat teg a1f02c36ba31691bcfe87b2722de723b

<img id="img" src="" alt="image">

2. Dapatkan rentetan dikodkan Base64 dan tetapkan pada atribut src bagi teg a1f02c36ba31691bcfe87b2722de723b

let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj
NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("img").src = base64Img;

3. Jika anda perlu menggunakan kod JavaScript untuk mendapatkan dan memproses rentetan yang dikodkan Base64, anda boleh menggunakan kanvas untuk menukar. Berikut ialah kod sampel untuk menukar imej kepada rentetan dikodkan Base64 melalui kanvas.

let img = document.createElement("img");
img.src = "image.png";

img.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

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

  let base64Img = canvas.toDataURL("image/png");

  document.getElementById("img").src = base64Img;
}

Di atas ialah cara menukar pengekodan Base64 kepada imej. Melalui kaedah ini, kami boleh memaparkan imej berkod Base64 dengan mudah dalam halaman web.

Atas ialah kandungan terperinci Tukar base64 kepada javascript imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!