精品国产免费观看久久久_久久天天躁狠狠躁夜夜爽_无码人妻少妇久久中文字幕_狠狠做深爱婷婷久久综合一区

互聯(lián)網(wǎng)知識

精準(zhǔn)傳達(dá) ? 價(jià)值共享

洞悉互聯(lián)網(wǎng)前沿資訊，探尋網(wǎng)站營銷規(guī)律

如何將圖片轉(zhuǎn)換base64格式？data:image/png;base64又是什么？

作者：狐靈科技 | 2020-02-10 10:00 |點(diǎn)擊：

一、我們在看代碼時(shí)經(jīng)常在img或css背景圖片中看到： 
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus 
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”
 
src或 url() 中有一大串編碼。它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具， 后面跟的一串代碼就相當(dāng)于鏈接地址。
 
二、目前，Data URL scheme 支持的類型：
 
data:,文本數(shù)據(jù)
data:text/plain,文本數(shù)據(jù)
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圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)
 
三、js將圖片轉(zhuǎn)化為base64（2種方法）
 
利用canvas 將圖片轉(zhuǎn)化為base64 編碼格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
   img = new Image;
   img.src="./vheider.jpg";
 //  img.setAttribute('crossOrigin', 'anonymous')  // 圖片跨域時(shí)有用
   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"))
 
  };
 
注意： 這里要在服務(wù)端打開，不然瀏覽器可能會報(bào) index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 錯(cuò)誤
 
2 . 利用 html5 的 FileReader 將圖片轉(zhuǎn)化base64格式 
FileReader 是H5提供的一個(gè)處理文件的API， 
① 判斷瀏覽器是否支持FileReader
 
if(window.FileReader){
    //處理文件
}else{
   return "瀏覽器不支持FileRedaer"
}
 
② FileReader 接口有四個(gè)方法：
 
readAsBinaryString (file) 將文件讀取為二進(jìn)制碼 
readAsDataURL (file) 將文件讀取為 DataURL 
readAsText (file,encoding) 將文件讀取為文本(第二個(gè)參數(shù)是編碼格式，一般默認(rèn)是UTF-8) 
about 中斷讀取
 
③ FileReader還提供給了一些事件：
 
onabort 中斷時(shí)觸發(fā)
onerror 出錯(cuò)時(shí)觸發(fā)
onload 文件讀取成功完成時(shí)觸發(fā)
onloadend 讀取完成觸發(fā)，無論成功或失敗
onloadstart 讀取開始時(shí)觸發(fā)
onprogress 讀取中
注意：重點(diǎn)內(nèi)容 
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) // 打印出轉(zhuǎn)換后的 file 文件對象
    }  
}
 
如沒特殊注明，文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請注明?? "如何將圖片轉(zhuǎn)換base64格式？data:image/png;base64又是什么？
相關(guān)推薦
多一份免費(fèi)策劃方案，總有益處。

請直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢

網(wǎng)站設(shè)計(jì) 品牌營銷

多一份參考，總有益處

聯(lián)系狐靈科技，免費(fèi)獲得專屬《策劃方案》及報(bào)價(jià)

咨詢相關(guān)問題或預(yù)約面談，可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線：15082661954 / 大客戶專線：15523356218

關(guān)于狐靈科技

+

狐靈致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括 網(wǎng)站建設(shè)、 SEO優(yōu)化、移動(dòng)互聯(lián)網(wǎng)營銷、高端網(wǎng)站建設(shè)、高端網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站定制開發(fā)、營銷策劃推廣電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營銷、 為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，我們將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供一體化全方位的互聯(lián)網(wǎng)品牌整合方案！

我們的優(yōu)勢

量身打造個(gè)性化網(wǎng)站制作

代碼深度符合SEO優(yōu)化

一站式企業(yè)網(wǎng)站建設(shè)服務(wù)

前沿視覺設(shè)計(jì)、研發(fā)能力

重慶網(wǎng)站建設(shè)公司

多項(xiàng)網(wǎng)站設(shè)計(jì)傳播大獎(jiǎng)

營銷型網(wǎng)站建設(shè)專家

自主研發(fā)網(wǎng)站管理系統(tǒng)

B2C電商網(wǎng)站建設(shè)供應(yīng)商

完善的售后服務(wù)體系

我們的不同

+

在我們的對手消耗大量的時(shí)間停留在碎片化的互聯(lián)網(wǎng)設(shè)計(jì)或者程序?qū)崿F(xiàn)的時(shí)候，我們已經(jīng)開始把數(shù)字化品牌建設(shè)和網(wǎng)絡(luò)傳播進(jìn)行了整合。我們提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、創(chuàng)意表現(xiàn)、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站運(yùn)營反饋建議等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,為所有謀求長遠(yuǎn)發(fā)展的企業(yè)品牌貢獻(xiàn)全力！

公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業(yè)務(wù)熱線：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權(quán)所有 | 渝ICP備19005721號-1

專業(yè)團(tuán)隊(duì)為您提供 重慶網(wǎng)頁設(shè)計(jì), 品牌網(wǎng)站設(shè)計(jì),營銷型網(wǎng)站制作,SEO優(yōu)化關(guān)鍵詞排名推廣等服務(wù),建網(wǎng)站就找狐靈科技！ | TAG標(biāo)簽 | 網(wǎng)站建設(shè)地圖 | 網(wǎng)站地圖