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;
});
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
