-
首頁
-
網站建設
-
優化推廣
-
案例
方案
方案
Solutions
電商平臺
電商網站開發
E-commerce & System
微信營銷
資訊
我們
我們
About Us
聯系
聯系
Contact Us
-
- 聯系方式
- 業務熱線： 15082661954
- 郵箱： foxl@www.kxlw.net
- 人才招聘
- HR郵箱：
- 190014322@qq.com
精準傳達 ? 價值共享
洞悉互聯網前沿資訊，探尋網站營銷規律
如何將圖片轉換base64格式？data:image/png;base64又是什么？
作者：狐靈科技 | 2020-02-10 10:00 |點擊：
一、我們在看代碼時經常在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種方法）
利用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>
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.οnlοad=function (e){
imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'
console.log(this) // 打印出轉換后的 file 文件對象
}
}
如沒特殊注明，文章均為狐靈科技原創,轉載請注明?? "如何將圖片轉換base64格式？data:image/png;base64又是什么？
關于狐靈科技
+狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括 網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！
我們的優勢
多項網站設計傳播大獎
營銷型網站建設專家
自主研發網站管理系統
B2C電商網站建設供應商
完善的售后服務體系
我們的不同
+在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！
公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954
Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權所有 | 渝ICP備19005721號-1
專業團隊為您提供 重慶網頁設計, 品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！ | TAG標簽 | 網站建設地圖 | 網站地圖
