淺析JS中base64和圖片互相轉換（附代碼）

本篇文章給大家了解JS中base64和圖片互相轉換，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所助。

 

今天在用apicloud寫APP時，遇到一個base64轉圖片並直接展示在當前頁面的問題，因為之前使用過“trans”模塊，知道該模塊可以將圖片與base64格式之間來回轉換
所以想都沒想就使用了trans模塊，但是到后來我發現我拿不到轉換的圖片路徑，trans模塊保存是使用fs:// ，或者可以選擇將圖片保存到系統相冊
恕我才疏學淺不知道怎么去獲取fs:// 路徑，而且再去讓用戶手動去相冊選擇圖片未免太麻煩
然后我就反應過來了，img標簽不是可以直接識別base64字符並轉換為圖片嗎？......

誒，我開發還是過於依賴框架、模塊、插件等，很多原生的東西都要記不得了
以后開發可一定得記住咯，順便附上JS互轉base64和圖片

js將圖片轉化為base64

var img = "imgurl";//imgurl 就是你的圖片路徑
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, img.width, img.height);
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
     var dataURL = canvas.toDataURL("image/"+ext);
     return dataURL;
}

var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64)
}

js將base64轉化為圖片格式

js直接設置img的src屬性為圖片的base64數據即可

document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );<br data-filtered="filtered">如下：
<br data-filtered="filtered"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">

以上就是淺析JS中base64和圖片互相轉換（附代碼）的詳細內容。（拼多多培訓）