將圖片轉換base64格式,data:image/png;base64是什么?


一、我們在看代碼時經常在img或css背景圖片中看到:
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串編碼。它把一些 8-bit 數據翻譯成標准 ASCII 字符,網上有很多免費的base64 編碼和解碼的工具, 后面跟的一串代碼就相當於鏈接地址。

二、目前,Data URL scheme 支持的類型:

data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/JavaScript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據

三、js將圖片轉化為base64(2種方法)

  1. 利用canvas 將圖片轉化為base64 編碼格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
img = new Image;
img.src="./vheider.jpg";
// img.setAttribute('crossOrigin', 'anonymous') // 圖片跨域時有用
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL =canvas.toDataURL("image/jpeg");

$('#img').attr('src', dataURL);
console.log(canvas.toDataURL("image/jpeg"))

};

注意: 這里要在服務端打開,不然瀏覽器可能會報 index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 錯誤


2 . 利用 html5 的 FileReader 將圖片轉化base64格式
FileReader 是H5提供的一個處理文件的API,
① 判斷瀏覽器是否支持FileReader

if(window.FileReader){
//處理文件
}else{
return "瀏覽器不支持FileRedaer"
}

② FileReader 接口有四個方法:

readAsBinaryString (file) 將文件讀取為二進制碼
readAsDataURL (file) 將文件讀取為 DataURL
readAsText (file,encoding) 將文件讀取為文本(第二個參數是編碼格式,一般默認是UTF-8)
about 中斷讀取

③ FileReader還提供給了一些事件:

  • onabort 中斷時觸發
  • onerror 出錯時觸發
  • onload 文件讀取成功完成時觸發
  • onloadend 讀取完成觸發,無論成功或失敗
  • onloadstart 讀取開始時觸發
  • onprogress 讀取中

注意:重點內容
FileReader 讀取后的文件不會返回給FileReader 本身, 而是存儲在了 result 中

HTML

<input type="file" id="file"  multiple="multiple">
<div id="imgDiv"></div>

JS

var result = document.getElementById("result");  
var file = document.getElementById("file");
file.change=function(){
var file = file.files[0]
var reader=new FileReader();

reader.readAsBinaryString(file);
reader.onload=function (e){
imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'
console.log(this) // 打印出轉換后的 file 文件對象
}
}

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com