在項目中有一鍵生成海報的需求伤哺,用htmlcanvas插件來合成,
問題:
在安卓手機上將合成之后的海報進行長按轉(zhuǎn)發(fā)給朋友砌梆,
第一次分享出去的圖是頁面上其他的一張小圖默责。
第二次轉(zhuǎn)發(fā)給朋友正常。
分析:
第一次分享不成功咸包,第二次成功說明分享功能沒問題桃序;
ios每次分享都成功說明是安卓手機的問題;
安卓直接長按普通圖片轉(zhuǎn)發(fā)沒問題烂瘫,只是轉(zhuǎn)發(fā)合成之后的圖有問題媒熊,說明是安卓手機合成圖片轉(zhuǎn)發(fā)有問題奇适;
最終原因:
合成圖片的分辨率太高,部分安卓手機無法正常展示芦鳍。
解決方案:
將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);