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

日期：2020-12-11 类型：科技新闻 

关键词：秀米制作h5，h5如何制作，h5小游戏制作，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定的参照学习培训使用价值，感谢大伙儿对脚本制作之家的适用。

上一篇：应用html2canvas完成将html內容写入到canvas中转化成 返回下一篇：Canvas 像素解决之更改全透明度的完成编码