前端生成带有logo的二维码并保存

一、将生成的二维码与logo图标合并并保存二维码

需求：
1、前端自己生成带有logo的二维码并保存二维码
2、logo是图片

思路：
1、引用生成二维码的库（此处使用的是node-qrcodel，该库是目前我找到仍然在维护，且GitHub上星比较多的，但是生成的二维码不带logo，需要自己把logo加进去），插件链接
2、使用node-qrcode生成不带logo的二维码
3、将 logo 图片转换成 canvas（使用了 canvas 的 drawImage 方法：ctx.drawImage(logoImg, 4, 4, 32, 32);）
4、将第3步生成的 logo canvas 与第2步生成的二维码合并
5、保存二维码图片（使用了toDataURL）

二、实现步骤

1、html代码

<div class="qrcode" v-show="_showCode"><img v-show="false" src="/media/img/logo.png" alt="" ref="logoImg"><div class="qrcodeCanvas"><canvas ref="qrcodeCanvas"></canvas></div><a href="javascript:;" class="button button-primary" @click="downloadCode">保存二维码</a></div>

import QRCode from 'qrcode';   //引入生成二维码的库

说明：
1、logoImg是二维码中间的logo，这里预先加载进来，防止后面转换的时候获取不到图片。
2、logo 不能太大，不然二维码扫描不到内容，此处整个canvas画布是200200，logo是4040

2、logo图片转canas

imgToggleCanvas() {const canvas = document.createElement('canvas');const { logoImg } = this.$refs;const ctx = canvas.getContext('2d');ctx.fillStyle = '#FFFFFF';ctx.fillRect(0, 0, 40, 40);        //先画一个40*40的正方形，颜色#ffffff，此处因为logo图片四周没有留白ctx.drawImage(logoImg, 4, 4, 32, 32);       //将 32*32 的 logoImg 画到 canvas 上return canvas;
},

3、生成的 logo cavans与二维码 canvas 合并

mergeCanvas(generateCanvas) {        //生成的二维码 canvas const { qrcodeCanvas } = this.$refs;const logoCavans = this.imgToggleCanvas();        //第2步里面的转换后的canvasconst canvas = document.createElement('canvas');canvas.width = generateCanvas.width;canvas.height = generateCanvas.height;canvas.getContext('2d').drawImage(generateCanvas, 0, 0); //将 generateCanvas 画到 canvas 上，坐标 0，0canvas.getContext('2d').drawImage(logoCavans, 80, 80); //将 logoCavans 画到 canvas 上，坐标 80，80qrcodeCanvas.width = canvas.width;qrcodeCanvas.height = canvas.height;qrcodeCanvas.getContext('2d').drawImage(canvas, 0, 0);
},

4、生成二维码

// 生成二维码generateQrcode() {const options = {width: 200,height: 200,};QRCode.toCanvas(this.link, options).then((el) => {this.showCode = true;        //showCode 决定是否显示二维码this.mergeCanvas(el);       //生成二维码后，合并二维码}).catch((err) => {this.showCode = false;});},

5、保存二维码

downloadCode(event) {const { qrcodeCanvas } = this.$refs;const url = qrcodeCanvas.toDataURL('image/png');//h5 的download属性在IE上，只从IE13开始兼容，所以需要 `window.navigator.msSaveOrOpenBlob` 里兼容IE10、11，IE9仍然无法兼容if (window.navigator.msSaveOrOpenBlob) {    //IEconst bstr = atob(url.split(',')[1])let n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}const blob = new Blob([u8arr])window.navigator.msSaveOrOpenBlob(blob, '{% trans "Link QR code.png" %}')} else {       //非IE$(event.target).attr('href', url);$(event.target).attr('download', '{% trans "Link QR code.png" %}');}}

说明：因为后来考虑到 IE9及其他不兼容 download 属性的浏览器下载问题，将 qrcodeCanvas.toDataURL('image/png'); 生成的base64传给了后端，后端实现下载功能，前端及后端python代码如下：

var event= event||window.event;
var qrcodeCanvas=$('#qrcode_canvas')[0];
var url = qrcodeCanvas.toDataURL('image/png');
var downloadQRcode=$('#downloadQRcode');     //此处是一个表单，使用表单的 post 来提交 base64 数据
$('input.base64',downloadQRcode).val(url.split(',')[1]);        //提交的base64数据，此处仅提交 base 64 内容
$('input[type="submit"]',downloadQRcode).click();  //表单提交，另外在提交的时候，最好禁止表单提交的默认事件，即打开新的页面

def download_base64_img(request):base64_str =request.POST.get('base64data', '')from django.http import StreamingHttpResponseimport base64imagedata = base64.b64decode(base64_str)response = StreamingHttpResponse(imagedata)response['content-type'] = "application/octet-stream"response['Content-Disposition'] = 'attachment;filename=QR_code.png'return response

前端生成带有logo的二维码并保存相关推荐

生成带有logo的二维码
效果准备: <dependency><groupId>com.google.zxing</groupId><artifactId>javase< ...
java利用qrcode生成带有logo的二维码（logo位置及大小自己调）
一:下载Qrcode.jar,放到lib文件夹下二:java代码 package com.test; import java.awt.Color; import java.awt.Graphics2 ...
使用zxing生成带logo的二维码图片，自动调节logo图片相对二维码图片的大小
使用zxing生成带logo的二维码图片,自动调节logo图片相对二维码图片的大小 * 可选是否带logo,可选是否保存二维码图片:结果返回base64编码的图片数据字符串 * 页面显示:< ...
python—生成带logo的二维码(零基础向)
在python 中可以用qrcode 库将文本.图片.视频链接等生成二维码,并用图片处理库PIL 中的Image 方法添加自定义图片,制作带有logo的二维码.本文以Windows 系统为例进行演示. ...
Java生成中间logo的二维码（还可以加上二维码名称哦）
最近有负责微信开发,对于微信开发的项目,肯定少不了二维码啦,正好有个这样的需求,这对不同的商品生成一个二维码,扫码即刻下单.博主就弄了一个二维码生成的工具类. 弄出来之后,产品经理又说了,中间放上公司 ...
iOS 生成带 logo 的二维码，区域截屏保存至相册（小功能二连发 (一)）
原文链接:http://www.jianshu.com/p/36e9f012ef39 生成带 logo 的二维码区域截屏相关 -- 由3033分享开篇最近项目需要搞了几个相对独立的小功能,今天有 ...
zxing生成带logo的二维码
倒Zxing依赖 implementation 'cn.bingoogolapple:bga-qrcode-zxing:1.2.1' 代码段 import android.graphics.Bitma ...
Android Studio 生成二维码、生成带logo的二维码
1.生成二维码: 2.生成logo的二维码: 一.引入依赖首先在libs文件目录下放进jar包zxing.jar,要下载zxing.jar就点击链接:下载zxing.jar(记得点击"Cd ...
asp.net 后台生成二维码及生成带logo的二维码
asp.net 后台生成二维码及生成带logo的二维码,此处将生成二维码和带Logo的二维码写在一起的,需要自己区分一下. 直接上代码 using System; using System.Colle ...

前端生成带有logo的二维码并保存

一、将生成的二维码与logo图标合并并保存二维码

二、实现步骤

1、html代码

2、logo图片转canas

3、生成的 logo cavans与二维码 canvas 合并

4、生成二维码

5、保存二维码

前端生成带有logo的二维码并保存相关推荐

最新文章

热门文章