在项目中有一键生成海报的需求,用htmlcanvas插件来合成,
问题:
在安卓手机上将合成之后的海报进行长按转发给朋友,
第一次分享出去的图是页面上其他的一张小图。
第二次转发给朋友正常。
分析:
第一次分享不成功,第二次成功说明分享功能没问题;
ios每次分享都成功说明是安卓手机的问题;
安卓直接长按普通图片转发没问题,只是转发合成之后的图有问题,说明是安卓手机合成图片转发有问题;
最终原因:
合成图片的分辨率太高,部分安卓手机无法正常展示。
解决方案:
将scale配置改小一点就好。
let timer = setTimeout(() => {
(window.html2canvas || html2canvas)(odm, {
allowTaint: false,
scale: 2,//将scale配置从6改2。
dpi: 200,
useCORS: true,
backgroundColor: null,
width: odm.offsetWidth,
height: odm.offsetHeight
}).then((canvas) => {
Toast.clear();
this.htmlUrl = canvas.toDataURL('image/png');
this.showCanvas = true;
clearTimeout(timer);
timer = null;
});
}, 200);
网友评论