首頁猿問 web移動端對上傳頭像圖片進(jìn)行壓縮...

web移動端對上傳頭像圖片進(jìn)行壓縮，當(dāng)圖片過大的時候壓縮不成功但是也沒有報錯

JavaScript

翻閱古今 2019-05-14 11:27:12

這兩天在做移動端上傳頭像功能，想對大于400kb的圖片進(jìn)行壓縮再上傳，壓縮大于400kb的圖片一直沒成功，也沒有報什么錯誤，后來我重新看了自己的代碼，發(fā)現(xiàn)是因為當(dāng)圖片大小大于400kb的時候，壓縮圖片函數(shù)傳入的base64Img參數(shù)我寫錯了，真的是太粗心，現(xiàn)在將正確的代碼附上：uploadImg(){letvm=this;console.log(vm.temp);varimg=document.getElementById("phoneImage"),maxSize=400*1024;//400kbvarimgFile=newFileReader();imgFile.readAsDataURL(img.files[0]);imgFile.onload=function(){vm.temp.base64Img=imgFile.result;if(vm.temp.base64Img.length{constdata=response.data;vm.temp=data.data;setTimeout(()=>{vm.$router.push({path:"/setting"});window.location.reload();},5);});}else{//>400kb,壓縮再上傳vm.compress(vm.temp.base64Img,function(base64Img){uploadImage({base64Img}).then(response=>{constdata=response.data;setTimeout(()=>{vm.$router.push({path:"/setting"});window.location.reload();},5);});});}};},compress(base64Img,callback){varimg=newImage();img.src=base64Img;img.onload=function(){varwidth=img.width;varheight=img.height;varcanvas=document.createElement("canvas");canvas.width=width;canvas.height=height;canvas.getContext("2d").drawImage(img,0,0,width,height);callback(canvas.toDataURL("image/jpeg",0.05));};}

查看完整描述

2 回答

汪汪一只貓

TA貢獻(xiàn)1898條經(jīng)驗獲得超8個贊

你這個壓縮圖片有問題你this.compress(vm.temp.base64Img);傳入的是base64格式的字符串canvas.width=img.width;canvas.height=img.height;這里base64格式的字符串是獲取不到寬高的這句canvas.toDataURL("image/jpeg",0.15)你之前沒有把圖片畫到canvas上所以的canvas上是空的callback：compress(base64img,callback){varimg=newImage();img.src=base64img;img.onload=function(){varwidth=img.width;varheight=img.height;varcanvas=document.createElement("canvas");canvas.width=width;canvas.height=height;canvas.getContext("2d").drawImage(img,0,0,width,height);callback(canvas.toDataURL("image/jpeg",0.15))}}//調(diào)用vm.compress(vm.temp.base64img,function(base64img){uploadImage({base64img}).then(response=>{constdata=response.data;//...});});promise：functioncompress(base64img,callback){returnnewPromise(function(resolve){varimg=newImage();img.src=base64img;img.onload=function(){varwidth=img.width;varheight=img.height;varcanvas=document.createElement("canvas");canvas.width=width;canvas.height=height;canvas.getContext("2d").drawImage(img,0,0,width,height);resolve(canvas.toDataURL("image/jpeg",0.15))}})}//調(diào)用vm.compress(vm.temp.base64img).then(base64img=>uploadImage({base64img})).then(response=>{constdata=response.data;//...});