JS生成二维码图片并下载，二维码可带logo

一 JS生成二维码图片

参考链接：菜鸟教程QRCode.js：使用 JavaScript 生成二维码
上面链接里面的代码可以直接运行，也可以把里面提到的github（https://github.com/davidshimjs/qrcodejs）上的文件克隆到本地后运行一下，这样你会有更直观的感受。重点代码如下

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>var makeQrCode = function (data) {var qrcode = new QRCode(document.getElementById("qrcode"), {width: 200,height: 200});qrcode.makeCode(data);};

上面代码中的data就是二维码所要包含的信息，可以是一个链接或一段文字。
生成了最基本的二维码，尝试到成功的喜悦之后。考虑到客户可能要求二维码中间带logo，要求二维码可以下载保存。所以继续尝试。

二生成带logo的二维码

参考帖子：HTML5笔记：利用JS生成中间带logo的二维码
这个链接非常好，里面把依赖的js文件都分享出来了，再也不用花积分下载了

<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="utf.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>var makeQrCode = function (data) {// 生成带logo的二维码$('#qrcode').qrcode({render : 'canvas',    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好text : data,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接width : '200',               //二维码的宽度height : '200',              //二维码的高度src: 'logo_qrCode.jpg'});
};

就这样，带logo的二维码就有了。但是我发现了一个问题。二维码中间的logo是方角的，没办法调整格式。水平有限只能做到这里了。下面对比一下JS和C#生成的二维码

此外，开发时我还遇到了两个问题

我的代码是写在项目里的，src的值，也就是logo的路径写的有问题，图片加载不到，导致生成的二维码不带图片。
我是.net项目，用的力软的敏捷开发框架。打印功能也是用的力软封装的，带logo的二维码没法打印。不知道怎么回事。

三二维码下载

通过下载按钮点击事件，触发下载图片。
参考链接不记得了，网上看到写法很多，我只找了一个，能用就行

 $('#qrCode_download').on('click', function () {downloadQrcode();});
//picName是保存图片的名称，在这里是一个变量
function downloadQrcode() {let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');let a = document.createElement('a');a.href = myCanvas[0].toDataURL('image/png');a.download = picName;a.click();}

JS生成二维码图片并下载，可带logo相关推荐

qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
uniapp weapp-qrcode.js生成二维码，并下载二维码图片
找了很多插件,但是都太复杂,不符合自己的要求找了个最简单的.weapp-qrcode.js ,生成二维码没有问题,但是下载图片获取不到图片路径,自己稍微改造了一下 https://github.co ...
vue生成二维码图片并且下载图片到本地
一.安装生成二维码插件qrcode.js npm install --save qrcodejs2 二.封装组件: <template><div><div id=&quo ...
JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码
各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码.核销码等等. 那么,小程序端该如何生成二维码图片呢? 效果如下: weapp-qrcode.js 小伙伴们可以来 ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
NextQRCode ZXing开源库的精简版 **基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能原文博客附源码下载地址** 与原ZXingMini项目对比 N ...
PHP根据指定url生成二维码图片
一.composer安装 http://packagist.p2hp.com/packages/codeitnowin/barcode 二.使用调用generateQrCode()方法即可实现生成二 ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...

JS生成二维码图片并下载，可带logo

一 JS生成二维码图片

二生成带logo的二维码

三二维码下载

JS生成二维码图片并下载，可带logo相关推荐

最新文章

热门文章

JS生成二维码图片并下载，可带logo

一 JS生成二维码图片

二 生成带logo的二维码

三 二维码下载

JS生成二维码图片并下载，可带logo相关推荐

最新文章

热门文章

二生成带logo的二维码

三二维码下载