• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    canvas生成带二维码海报的踩坑记录

    canvas海报内容有背景图,圆形头像,用户昵称,链接的二维码图片。

    问题如下

    图片不显示

    图像模糊

    一开始对安卓机型统一做了dpr=1的处理,结果安卓机上图片非常的模糊,圆角头像锯齿严重,网上的解决方法无一成功,后来还是将dpr设为window.devicePixelRatio就好了,只是图片的宽高最好设置为固定值,根据flexble自适应

    部分代码示例

    // 头像;
    const imgAvadar = await promiseLoadImg(this.userInfoExternal.headUrl);
    const imgSize = 40 * this.dpr;
    const imgPos = 24 * this.dpr;
    
    ctx.arc((this.canvas.width / 2), (imgPos + (imgSize / 2)), (imgSize / 2), 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(imgAvadar, ((this.canvas.width / 2) - (imgSize / 2)), imgPos, imgSize, imgSize);

     

    new Promise(resolve => {
        const img = new Image();
        // base64添加了以下跨域配置,在低版本安卓中会不显示图片
        if (src.indexOf('base64,') === -1) {
            img.setAttribute('crossOrigin', 'Anonymous');
        }
        img.onload = function () {
            resolve(img);
        };
        img.src = src;
    });

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

    上一篇:html5写一个BUI折叠菜单插件的实现方法
    下一篇:html5移动端价格输入键盘的实现
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    canvas生成带二维码海报的踩坑记录 canvas,生成,带,二维,码海,