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

在

之前的文章《解析mysql的安裝與使用（收藏）》中，給大家了解了mysql的安裝與使用。以下這篇文章給大家了解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(&#39;img&#39;).setAttribute( &#39;src&#39;, &#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==&#39; );<br data-filtered="filtered">如下：<br data-filtered="filtered"><img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="淺析JS中base64和圖片互相轉換（附程式碼）" >

推薦學習：js影片教學

#

以上是淺析JS中base64和圖片互相轉換（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！