canvas转化成带2维码海报的踩坑纪录

日期:2020-10-09 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

canvas海报內容有情况图,圆形头像,客户昵称,连接的2维码照片。

难题以下

照片无法显示

  • 绘图3D渲染的情况下图象无法显示:是由于照片多线程载入,因此canvas的实际操作必须放在onload恶性事件中,不然照片会无法显示,由于照片不止1张,提议放在promise中,用async,await启用
  • canvas最后转化成照片共享出去,转化成的照片无法显示:是由于图象跨域难题,设定img的attr,‘crossOrigin'为'Anonymous'就行了,可是要留意,假如一不小心为base64也设定了这个主要参数,在低版本号的安卓系统(我出現难题是在华为安卓系统4.4.2中)base64就不容易显示信息。

图象模糊不清

1刚开始对安卓系统机型统1做了dpr=1的解决,結果安卓系统机上照片十分的模糊不清,圆角头像锯齿比较严重,在网上的处理方式无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,') === ⑴) {
        img.setAttribute('crossOrigin', 'Anonymous');
    }
    img.onload = function () {
        resolve(img);
    };
    img.src = src;
});

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,感谢大伙儿对脚本制作之家的适用。