1. 程式人生 > >base64編碼與圖片之間相互轉換

base64編碼與圖片之間相互轉換

Base64是網路上最常見的用於傳輸8Bit位元組碼的編碼方式之一 一、將base64轉換成圖片 只需要在img 標籤中引入即可,注意要加上標明字首(data:image/png;base64),否則並不知道,這串程式碼是幹啥的 如: 二、將圖片轉換成base64 通過canvas.toDataURL將圖片轉換成base64,需要注意的是,在轉換成 dataURL 前必須先確保圖片成功載入到,於是.toDataURL()方法應該寫在的onload非同步事件中。 var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; //var img = "http://127.0.0.1/base64/1.jpg"; 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.crossOrigin = 'anonymous'; image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 跨域問題 當img的地址存在跨域時,而且伺服器不允許跨域,這樣是轉換不了的,當伺服器允許跨域時,前端的圖片也要設定跨域image.crossOrigin = 'anonymous';