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 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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无刷新上传文件实现代码
2011/09/19 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python批量图片处理简单示例
2019/08/06 Python
python算的上脚本语言吗
2020/06/22 Python
Python读写Excel表格的方法
2021/03/02 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
英文简历中的自我评价
2013/10/06 职场文书
小班上学期评语
2014/05/05 职场文书
党员民主生活会材料
2014/12/15 职场文书
公司岗位说明书
2015/10/08 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
Python实现简单得递归下降Parser
2022/05/02 Python