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

时间: 2019-08-10阅读: 31标签: 二维码

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

链接: http://www.fly63.com/article/detial/5248

利用qrcode.js生成二维码

什么是 QRCode.js?QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

React 生成二维码/条形码的插件

qrcode 是一个js插件,具体可以github,这边不多介绍。 qrcode.react这个是修改为React的一个插件。 具体是生成二维码的原理是什么,这边也不多做介绍。

Node.js在指定的图片模板上生成二维码图片并附带底部文字说明

Node.js在指定的图片模板上生成二维码图片并附带底部文字说明,但是如果我们希望生成的不仅仅是二维码,而是在一张给定的背景图上生成二维码,并在底部配上相应的文字说明,那么就需要借助于其它一些包来实现。

网页中二维码识别规则,以及二维码识别常见问题

当客户端发现用户在网页的img标签内进行长按操作时,会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏,而不是之前有人提到的img标签中的图片。基于截屏识别,网页中二维码无法被识别的原因有这几个

Vue实现生成二维码并且能下载到本地_vue-qr的使用

vue-qr先说一下特点:带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。简单的生成了二维码,这个生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js

qrcode.js_一款使用JavaScript生成/解析识别二维码的js库

qrcode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 这篇文章主要讲解qrcode.js生成二维码,qrcode.js解析识别二维码等

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全