在
之前的文章《解析mysql的安裝與使用(收藏)》中,給大家了解了mysql的安裝與使用。以下這篇文章給大家了解JS中base64和圖片互相轉換,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所助。
今天在用apicloud
寫APP時,遇到一個base64
轉圖片並直接展示在目前頁面的問題,因為之前使用過「trans
」模組,知道該模組可以將圖片與base64
格式之間來回轉換
所以想都沒想就使用了trans
模組,但是到後來我發現我拿不到轉換的圖片路徑,trans
模組保存是使用fs://
,或者可以選擇將圖片儲存到系統相簿
恕我才疏學淺不知道怎麼去取得fs://
路徑,而且再去讓使用者手動去相簿選擇圖片未免太麻煩
然後我就反應過來了,img
標籤不是可以直接識別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
直接設定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==" alt="淺析JS中base64和圖片互相轉換(附程式碼)" >
推薦學習:js影片教學
#以上是淺析JS中base64和圖片互相轉換(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!