canvas生成带二维码海报的踩坑记录


Posted in HTML / CSS onSeptember 11, 2019

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;
});

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 #HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 #HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 #HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 #HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 #HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 #HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 #HTML / CSS
You might like
php正则
2006/07/07 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript读取RSS数据
2007/01/20 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python字符串格式化
2015/06/15 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
python实现视频分帧效果
2019/05/31 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
应聘医药销售自荐书范文
2014/02/08 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
最美护士演讲稿
2014/08/27 职场文书
毕业论文致谢范文
2015/05/14 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL