本文實(shí)例講述了JS實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)提供成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì),成都品牌網(wǎng)站建設(shè),廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作,十余年的網(wǎng)站開(kāi)發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè),成功案例突破1000+,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.
網(wǎng)絡(luò)上有很多片介紹通過(guò)js將圖片轉(zhuǎn)換成base64的文章,之所以再寫這篇文章的原因時(shí)發(fā)現(xiàn)沒(méi)有找到系統(tǒng)的介紹的文章,有的介紹如何實(shí)現(xiàn)本地項(xiàng)目的圖片轉(zhuǎn)碼,有的介紹如何實(shí)現(xiàn)網(wǎng)絡(luò)資源的圖片轉(zhuǎn)化,但是系統(tǒng)介紹的少之又少,所以我就在這里將各種場(chǎng)景系統(tǒng)的介紹一下:
場(chǎng)景一:將用戶本地上傳的資源轉(zhuǎn)化,即用戶通過(guò)瀏覽器點(diǎn)擊文件上傳時(shí),將圖片資源轉(zhuǎn)化成base64:
<input type="file" id="image"><br/>
var reader = new FileReader(); var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節(jié))( 2 M = 2097152 B )超過(guò)2M上傳失敗 var file = $("#image")[0].files[0]; var imgUrlBase64; if (file) { //將文件以Data URL形式讀入頁(yè)面 imgUrlBase64 = reader.readAsDataURL(file); reader.onload = function (e) { //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分(可選可不選,需要與后臺(tái)溝通) if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) { alert( '上傳失敗,請(qǐng)上傳不大于2M的圖片!'); return; }else{ //執(zhí)行上傳操作 alert(reader.result); } } }
場(chǎng)景二:將本項(xiàng)目中的圖片資源轉(zhuǎn)化成base64,(我還沒(méi)有用到過(guò)此場(chǎng)景,感覺(jué)場(chǎng)景二也可以通過(guò)場(chǎng)景三來(lái)實(shí)現(xiàn))
function(){ var url = "static/img/js1.jpg";//這是站內(nèi)的一張圖片資源,采用的相對(duì)路徑 convertImgToBase64(url, function(base64Img){ //轉(zhuǎn)化后的base64 alert(base64Img); }); } //實(shí)現(xiàn)將項(xiàng)目的圖片轉(zhuǎn)化成base64 function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img,0,0); var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); canvas = null; }; img.src = url; }
場(chǎng)景三:將網(wǎng)絡(luò)圖片資源轉(zhuǎn)化為base64,(感覺(jué)場(chǎng)景二中的資源換成絕對(duì)路徑即可使用在場(chǎng)景三中)
function(){ //這是網(wǎng)上的一張圖片鏈接 var url="http://p1.pstatp.com/large/435d000085555bd8de10"; getBase64(url) .then(function(base64){ console.log(base64);//處理成功打印在控制臺(tái) },function(err){ console.log(err);//打印異常信息 }); } //傳入圖片路徑,返回base64 function getBase64(img){ function getBase64Image(img,width,height) {//width、height調(diào)用時(shí)傳入具體像素值,控制大小 ,不傳則默認(rèn)圖像大小 var canvas = document.createElement("canvas"); canvas.width = width ? width : img.width; canvas.height = height ? height : img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); var dataURL = canvas.toDataURL(); return dataURL; } var image = new Image(); image.crossOrigin = ''; image.src = img; var deferred=$.Deferred(); if(img){ image.onload =function (){ deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理 } return deferred.promise();//問(wèn)題要讓onload完成后再return sessionStorage['imgTest'] } }
至此,便將圖片base64轉(zhuǎn)碼的三種場(chǎng)景介紹完畢了,下面是基于以上的一下拓展:
拓展一:后臺(tái)需要以純字符串的形式上傳(即去掉data:image/png;base64,截取字符串即可)
reader.result.substring(reader.result.indexOf(",") + 1)
拓展二:判斷base64資源大小,超過(guò)2M不讓上傳
var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節(jié))( 2 M = 2097152 B ) if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) { alert( '上傳失敗,請(qǐng)上傳不大于2M的圖片!'); return; }
其中reader.result
即是base64轉(zhuǎn)碼后的結(jié)果。以上便是對(duì)網(wǎng)絡(luò)上的一些資源的整理,親測(cè)可用。
PS:這里再為大家提供幾款base64在線工具供大家參考:
BASE64編碼解碼工具:
http://tools.jb51.net/transcoding/base64
在線圖片轉(zhuǎn)換BASE64工具:
http://tools.jb51.net/transcoding/img2base64
Base64在線編碼解碼 UTF-8版:
http://tools.jb51.net/tools/base64_decode-utf8.php
Base64在線編碼解碼 gb2312版:
http://tools.jb51.net/tools/base64_decode-gb2312.php
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript加密解密技巧匯總》、《javascript編碼操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
本文題目:JS實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景實(shí)例分析
路徑分享:http://muchs.cn/article6/ghicig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、軟件開(kāi)發(fā)、Google、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
網(wǎng)頁(yè)設(shè)計(jì)公司知識(shí)