qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码 |
您所在的位置：网站首页 › 二维码中间有个人像片的 › qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码 |
qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码
|
文章目录
一、通过qrcodejs2生成一个二维码二、点击【下载配置服务器二维码】来下载二维码1、通过canvas去绘制 边框+二维码+logo（1）为canvas增加绘制圆角矩形的方法（canvas本身不提供）（2）通过canvas绘制 圆角边框 + 二维码 + logo
2、通过a.download 去下载图片
一、通过qrcodejs2生成一个二维码
粗略代码，部分代码省略。 在 view.vue 文件中，HTML部分 步骤二：对App配置服务器 下载配置服务器二维码 步骤三：登录企业帐号，开始使用view.vue 文件，javascript 部分 import QRcode from 'qrcodejs2'; export default { name: "viewPage", data() { return {} }, methods:{ // 生成二维码 createQrcode() { new QRcode(this.$refs['qrcode-config'],{ text: "wataru is the best", // 扫二维码后获得的信息 width: 90, // 图片宽90px，左右padding各4px，边框各1px， 100-8px-2px height: 90, // 图片高90px，上下padding各4px，边框各1px， 100-8px-2px }) } }, mounted() { this.$nextTick(() => { this.createQrcode(); }); } }view.vue 文件，scss 样式部分，设计要求二维码要有圆角边框 /* 二维码图片容器,包括二维码 + logo + 边框 */ .img-box { padding-bottom: 8px; width: 100px; height: 100px; box-sizing: border-box; position: relative; } /* qrcodejs2 生成的二维码的容器，纯二维码*/ .qrcode-config { border: 1px solid #e5e5e6; padding: 4px; border-radius: 4px; width: 100px; height: 100px; box-sizing: border-box; img { box-sizing: border-box; } } /*二维码中间的logo*/ .qrcode-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27px; }qrcodejs2生成的二维码样式： 通过加圆角边框 + logo 定位展示的二维码样式 ：
1、通过canvas去绘制 边框+二维码+logo 2、通过a.download 去下载图片 1、通过canvas去绘制 边框+二维码+logo （1）为canvas增加绘制圆角矩形的方法（canvas本身不提供）方法参考来源： 详述Canvas(五)/绘制圆角矩形 - 作者：泥猴桃 上面文章详细讲解了坐标的计算，有兴趣的可以前去查看。 CanvasRenderingContext2D.prototype.roundRect = function(){} 这一步可以放到 this.createQrcode 或 mounted 中,在绘制canvas之前先扩展绘制圆角矩形的方法。 如果要下载的二维码不需要圆角边框 ，可以省略这一步，但是在drawQrcode方法中，context.roundRect(0, 0, 100, 100, 4).stroke();、context.fill()等要做出相应修改。 相关canvas 属性和方法 可查看以下两个链接： 1、Canvas fillRect() 方法 - W3C School 2、HTML DOM Canvas 对象 - W3C School // 增加绘制圆角矩形的方法 CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { // x: 水平坐标轴位置，y:垂直坐标轴位置，w: 圆角矩形的宽度，h:圆角矩形的高度，r:圆角矩形的圆角半径 if(w |
【本文地址】
今日新闻 |
推荐新闻 |