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; });
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对开心学习网的支持。
您可能感兴趣
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- canvas绘制图形方法(如何使用canvas绘制可移动网格的示例代码)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- canvas如何开启(canvas实现手机的手势解锁的步骤详细)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- canvas 动画线段(canvas简单连线动画的实现代码)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
热门推荐
- python获取股票每天k线(使用PyQtGraph绘制精美的股票行情K线图的示例代码)
- python指定路径创建txt文件(python根据txt文本批量创建文件夹)
- css里margin是什么意思(正确理解CSS中的margin合并的用法)
- 怎么把csv文件导入mysql(mysql导入csv的4种报错的解决方法)
- react native常用组件(react native环境安装流程)
- django admin 开发实例(Django给admin添加Action的步骤详解)
- python try高级用法(python try 异常处理史上最全)
- idea如何运行tomcat项目(在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目的过程详解)
- python线程安全队列(Python 限制线程的最大数量的方法Semaphore)
- dockerswarm 均衡策略(以示例讲解Clickhouse Docker集群部署以及配置)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9