如何避免使用canvas生成带二维码海报踩坑

发布时间:2022-02-28 16:04:58 作者:iii
来源:亿速云 阅读:146

这篇文章主要介绍了如何避免使用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;
});

关于“如何避免使用canvas生成带二维码海报踩坑”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“如何避免使用canvas生成带二维码海报踩坑”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 用工具实现在微信里面生成带二维码的海报?
  2. Java生成二维码分享海报

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

canvas

上一篇:怎么用canvas数字雨实现效果

下一篇:在AI智能中如何使用Catboost

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》