使用fileReader的一個(gè)坑及解決
關(guān)于fileReader的一個(gè)坑
在用fileReader做圖片瀏覽時(shí),
使用base64格式
var file=this.$refs.resource.files[0] var reader = new FileReader(); // 以DataURL的形式讀取文件: reader.readAsDataURL(file);
//讀取后的回調(diào)js是多線程 reader.onloadend=(e)=>{ }
Javascript 本身是單線程的,并沒(méi)有異步的特性。由于 Javascript 的運(yùn)用場(chǎng)景是瀏覽器,瀏覽器本身是典型的 GUI 工作線程,GUI 工作線程在絕大多數(shù)系統(tǒng)中都實(shí)現(xiàn)為事件處理,避免阻塞交互,因此產(chǎn)生了Javascript 異步基因。此后種種都源于此。
沒(méi)錯(cuò),網(wǎng)絡(luò),文件。。。。都是基于瀏覽器的接口實(shí)現(xiàn)的
如果兩次讀取的都 是相同的文件,并不會(huì)執(zhí)行加載完成事件。
fileReader在ios上面的坑(圖片轉(zhuǎn)base64)
最近在做項(xiàng)目,傳圖片這是很老的功能了,然后想壓圖片直接傳base64...一開(kāi)始用的代碼
var fileUpload = function(obj, callback){ //檢測(cè)瀏覽器是否支持FileReader對(duì)象 if(typeof FileReader == "undefined"){ alert("您的瀏覽器不支持FileReader對(duì)象!"); } var file = obj; //判斷類(lèi)型是不是圖片 if(!/image\/\w+/.test(file.type)){ alert("請(qǐng)確保文件為圖像類(lèi)型"); return false; } var reader = new FileReader(); reader.onload = function (e) { var img = new Image, width = 95, //圖片resize寬度 quality = 0.2, //圖像質(zhì)量 canvas = document.createElement('canvas'), drawer = canvas.getContext("2d"); img.src = this.result; var scale = parseInt(img.height / img.width); img.width=width; img.height = width * scale; canvas.width = img.width; canvas.height = img.height; drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL('image/jpeg', 0.2); console.log(base64); var image_base64 = img.src.replace("data:image/png;base64,",""); image_base64=encodeURIComponent(image_base64); alert("19") // 調(diào)用回調(diào) callback&&callback(img.src); } reader.readAsDataURL(file); }
上面這段代碼在PC和安卓上運(yùn)行一切正常,但在ios上會(huì)返回固定的一串base64編碼,不管你傳什么圖片都一樣..
然后就改……
再改.....
查看各種文檔..
繼續(xù)改...
最后是這樣子決解的
function getBase64(fileObj){ var file = fileObj, cvs = document.getElementById("canvas"), ctx = cvs.getContext("2d"); if(file){ var url = window.URL.createObjectURL(file);//PS:不兼容IE var img = new Image(); img.src = url; img.onload = function(){ ctx.clearRect(0,0,cvs.width,cvs.height); cvs.width = img.width; cvs.height = img.height; ctx.drawImage(img,0,0,img.width,img.height); var base64 = cvs.toDataURL("image/png"); callback(base64); alert("20") } } }
這個(gè)才是分享的重點(diǎn)……。
原因就是ios上不支持FileReader對(duì)象!
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
前臺(tái)js對(duì)象在后臺(tái)轉(zhuǎn)化java對(duì)象的問(wèn)題探討
在開(kāi)發(fā)項(xiàng)目中多次遇到前臺(tái)js對(duì)象在后臺(tái)轉(zhuǎn)化java對(duì)象的問(wèn)題,下面就為大家介紹下前臺(tái)js對(duì)象轉(zhuǎn)后臺(tái)java對(duì)象,感興趣的朋友可以了解下2013-12-12js實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置
本文主要介紹了利用javascript實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法,具有很好的參考作用,需要的朋友可以看看2016-12-12淺談JSON.parse()和JSON.stringify()
本文給大家簡(jiǎn)單描述了下JSON.parse()和JSON.stringify()的異同點(diǎn),十分的實(shí)用,有需要的小伙伴可以參考下2015-07-07javascript 緩沖效果 實(shí)現(xiàn)代碼
非常漂亮的緩沖效果代碼,大家可以看看下。2009-06-06localStorage實(shí)現(xiàn)便簽小程序
這篇文章主要為大家詳細(xì)介紹了localStorage實(shí)現(xiàn)便簽小程序的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11CocosCreator經(jīng)典入門(mén)項(xiàng)目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門(mén)項(xiàng)目之flappybird,詳細(xì)說(shuō)明了制作的每個(gè)步驟,還有詳盡的代碼,對(duì)CocosCreator感興趣的同學(xué),一定要看一下2021-04-04js 正則驗(yàn)證密碼強(qiáng)度(包含數(shù)字+特殊字符+英文字母大小寫(xiě))
密碼驗(yàn)證是常見(jiàn)的網(wǎng)站注冊(cè)方法,本文主要介紹了js 正則驗(yàn)證密碼強(qiáng)度(包含數(shù)字+特殊字符+英文字母大小寫(xiě)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01javascritp添加url參數(shù)將參數(shù)加入到url中
javascritp添加url參數(shù)方法,將參數(shù)加入到url中,如果原來(lái)url中有則覆蓋,下面是示例代碼,感興趣的朋友可以參考下2014-09-09