美文网首页
安卓手机 htmlcanvas合成图片,长按转发朋友第一次不成功

安卓手机 htmlcanvas合成图片,长按转发朋友第一次不成功

作者: 暖lily | 来源:发表于2021-07-13 10:07 被阅读0次

    在项目中有一键生成海报的需求,用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);

    相关文章

      网友评论

          本文标题:安卓手机 htmlcanvas合成图片,长按转发朋友第一次不成功

          本文链接:https://www.haomeiwen.com/subject/faujpltx.html