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定的参照学习培训使用价值，感谢大伙儿对脚本制作之家的适用。