HTML2Canvas---合成海报遇到问题总结

Posted 2021-11-29 super-scarlett

 

在使用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()
}