码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-05-13 14:14:45      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:总结   base64   dea   ret   base   安卓   ase   遇到   dex   

 

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


                   

 

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

标签:总结   base64   dea   ret   base   安卓   ase   遇到   dex   

原文地址:https://www.cnblogs.com/Super-scarlett/p/10856151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!