HTML2Canvas---合成海報遇到問題總結

 

在使用HTML2Canvas合成圖片項目中，通過不同手機測試，發現很多問題，總結一下，分享給大家。

1. 在iPhone的safari瀏覽器上，合成海報分享到微信，會報“網絡錯誤,無法分享”。

解決方案：

var userAgent = navigator.userAgent.toLowerCase();
var bIsIphoneOs = userAgent.match(/iphone os/i) == "iphone os";



if (bIsIphoneOs && userAgent.indexOf("safari") > -1 ) {
    this.imgUrl = URL.createObjectURL(this.base64ToBlob(canvas.toDataURL())) 
}


//base64轉blob
            base64ToBlob(code) {
                let parts = code.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;
     
                let uInt8Array = new Uint8Array(rawLength);
     
                for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {type: contentType});
            },

2.  部分安卓手機，非微信，也有分享問題。

var bIsAndroid = userAgent.match(/android/i)== "android";
 var	ua = navigator.userAgent.toLocaleUpperCase();
 var isWX = /micromessenger/i.test(ua);

if(bIsAndroid && !isWX) {
     that.imgUrl =  URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))                     
}else {
     that.imgUrl =  canvas.toDataURL()
}