canvas里面图片如何获取(canvas生成带二维码海报的踩坑记录)
类别:Web前端 浏览量:253
时间:2021-10-05 00:13:42 canvas里面图片如何获取
canvas生成带二维码海报的踩坑记录canvas海报内容有背景图,圆形头像,用户昵称,链接的二维码图片。
问题如下
图片不显示
- 绘制渲染的时候图像不显示:是因为图片异步加载,所以canvas的操作需要放在onload事件中,否则图片会不显示,因为图片不止一张,建议放在promise中,用async,await调用
- canvas最终生成图片分享出去,生成的图片不显示:是因为图像跨域问题,设置img的attr,‘crossOrigin'为'Anonymous'就好了,但是要注意,如果不小心为base64也设置了这个参数,在低版本的安卓(我出现问题是在华为安卓4.4.2中)base64就不会显示。
图像模糊
一开始对安卓机型统一做了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实现绘画一个未闭合的带进度条的圆环)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
- canvas 绘图解决方案(高清屏下canvas重置尺寸引发的问题的解决)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- canvas两种绘图方法(canvas 基础之图像处理的使用)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- canvas绘制动态线条(5分钟实现Canvas鼠标跟随动画背景)
- 使用canvas画个正方形(canvas小画板之平滑曲线的实现)
- canvas怎么画特效(canvas中普通动效与粒子动效的实现代码示例)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
热门推荐
- pandas数据分组使用方法(在Pandas中DataFrame数据合并,连接concat,merge,join的实例)
- css中的margin属性(css布局之负margin妙用及其他实现)
- php开发各种问题(解决php extension 加载顺序问题)
- phpredis消息队列(PHP+redis实现微博的推模型案例分析)
- 图解ftp服务器搭建(三分钟配置一个FTP服务器)
- dedecms屏蔽规则(使用Dedecms中七个容易忽略的安全细节介绍)
- 阿里云服务器ecs入口(阿里云ECS云服务器更换公网IP的方法)
- sqlserver创建带参数的存储过程(SQLServer存储过程实现单条件分页)
- pythonturtle库画图代码(用Python中的turtle模块画图两只小羊方法)
- Ext.slider控件的用法
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9