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中普通动效与粒子动效的实现代码示例)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
- canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas 动画线段(canvas简单连线动画的实现代码)
- canvas如何调试(关于canvas.toDataURL 在iOS运行失败的问题解决)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- canvas时钟代码(canvas实现烟花的示例代码)
- canvas图片显示报错(html2canvas生成的图片偏移不完整的解决方法)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
热门推荐
- linux怎么退出括号模式(Linux使用stty显示修改终端行设置)
- linux系统内核参数优化(Linux 系统优化的一些建议内核优化)
- css五种使用方法(CSS 的加载及加载顺序简介)
- pythonselenium判断网页加载完成(python 实现selenium断言和验证的方法)
- docker jdk离线安装(docker安装openjdk并运行jar包的操作方法)
- 小程序推荐ui库(AmazeUI 列表的实现示例)
- python编写一个聊天机器人(不到20行代码用Python做一个智能聊天机器人)
- mysql生成唯一订单号(MySQL高并发生成唯一订单号的方法实现)
- 如何排查mysql存储过程的问题(Mysql修改存储过程相关权限问题)
- php秒杀实现代码(php无限极分类实现方法分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9