JS實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景實(shí)例分析
本文實(shí)例講述了JS實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景。分享給大家供大家參考,具體如下:
網(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ì)有所幫助。
相關(guān)文章
使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)示例代碼
這篇文章主要給大家介紹了關(guān)于如何使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨機(jī)產(chǎn)生超鏈接地址的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨機(jī)產(chǎn)生超鏈接地址的方法,涉及JavaScript隨機(jī)數(shù)的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11微信小程序頁(yè)面調(diào)用自定義組件內(nèi)的事件詳解
這篇文章主要介紹了微信小程序頁(yè)面調(diào)用自定義組件內(nèi)的事件詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09無(wú)constructor的class類還能new嗎問(wèn)題解析
這篇文章主要為大家介紹了無(wú)constructor的class類是否還能new的問(wèn)題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03js數(shù)組常用19種方法(你會(huì)的到底有多少呢)
這篇文章主要給大家介紹了關(guān)于js數(shù)組常用19種方法,大家可以看看你會(huì)的到底有多少呢,在日常開(kāi)發(fā)中我們會(huì)接觸到j(luò)s中數(shù)組的一些方法,需要的朋友可以參考下2023-09-09JS如何將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳
這篇文章主要介紹了js將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳超詳細(xì),通過(guò)實(shí)例代碼介紹了JS時(shí)間戳轉(zhuǎn)換方式,需要的朋友可以參考下2023-05-05Moment.js實(shí)現(xiàn)多個(gè)同時(shí)倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了Moment.js實(shí)現(xiàn)多個(gè)同時(shí)倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08