所遇問題及解決方案總結

 

最近作了一個用canvas合成海報圖片的移動端項目,因爲一點canvas基礎都沒有,因此去網上搜了一位前輩的demo,可是開發過程當中遇到了不少問題,現將所遇問題及解決方法總結以下:css

 

一、移動端canvas項目適配全屏問題前端

  問題描述:因爲canvas的width和height只能設置px值,不支持rem單位,因此想在移動設備屏幕分辨率繁雜的狀況下達到canvas鋪滿全屏的效果很困難。canvas

  解決方法:經過js獲取到手機屏幕的clientWidth值,賦給canvas,以此來達到適配全屏的效果;後端

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth); var canvasHeight = Math.floor(clientWidth*(1334/750)); $("#main").css('width',canvasWidth+'px'); $("#main").css('height',canvasHeight+'px');

 

二、canvas合成的圖片出現模糊現象跨域

  問題描述:canvas生成的圖片出現模糊問題,尤爲是圖片上有二維碼須要識別的,用戶根本沒法識別;瀏覽器

  解決方法:1)能夠引用hidpi-canvas.js插件解決此問題;安全

       2)也能夠將canvas的style中的width和height值設置爲你想要的大小,而後將canvas的width和height的值分別放大x倍,此處注意,當你在畫布中繪製圖片或者文字時,相應數值也應放大x倍。微信

 

三、合成圖片時部分機型圖片錯亂iphone

  問題描述:部分安卓手機在導出canvas的base64圖片時,只能顯示想要效果圖片的一半,初步分析是設備像素比引發的bug。函數

  解決方法:獲取設備像素比pr,判斷機型,此處我只判斷了是iphone仍是安卓,暫時還未出現問題,合成圖片時再將width和height值恢復到原來的大小。

//hidpi-canvas將canvas的width和height屬性放大pr倍
if (navigator.userAgent.match(/iphone/i)) {
    canvas.width = width ;//恢復爲原先的大小
    canvas.height = height ; }else{ canvas.width = width / pr;//恢復爲原先的大小 canvas.height = height / pr; }

 

四、iphone手機上傳圖片出現旋轉問題

  問題描述:測試時發現,iPhone手機上傳照片出現旋轉狀況,而上傳從網上保存的圖片則不會出現此問題,安卓正常。

  解決方法:此問題可以使用exif.js插件解決,此插件會獲取照片拍攝時的角度等信息,主要是Orientation屬性,從而進行相應操做;

  

var file = $(this)[0].files[0];
EXIF.getData(file, function() { EXIF.getAllTags(this); Orientation = EXIF.getTag(this, 'Orientation'); }); 

 

 五、canvas繪製跨域圖片沒法導出base64圖片

  問題描述:當畫布中存在跨域請求來的圖片時,導出base64圖片失敗,初步分析應該是canvas自己的安全機制引發的。

  解決方法:此bug須要先後端配合解決,首前後端設置圖片容許跨域,而後前端設置Img.crossOrigin = "Anonymous";便可。

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');
var qrcodeImg = new Image(); qrcodeImg.crossOrigin = "Anonymous"; qrcodeImg.src = pageqrcodeimg; qrcodeImg.onload=function(){ //繪製圖片 }

 

六、canvas繪製圖片時會出現白屏狀況

  問題描述:canvas繪製圖片時偶爾會出現白屏狀況,初步分析是圖片還沒讀取完畢就執行了繪圖操做。

  解決方法:給img添加onload函數,圖片讀取完畢再執行繪圖操做。

qrcodeImg.onload=function(){
        //繪製圖片
}

 

七、微信瀏覽中中長按圖片沒法保存

  問題描述:經過canvas生成的圖片在微信瀏覽器中長按沒法保存或者識別二維碼,安卓部分圖片出現此狀況,iphone正常,初步分析是圖片質量太大致使。

  解決方法:導出base64圖片時壓縮圖片質量。

var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpeg",0.7);

 

後記:目前遇到的問題基本就這些,後期若是遇到什麼問題會持續更新。

相關文章
相關標籤/搜索