1、引入jquery的两个js文件

<script src="../scripts/erweima/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../scripts/erweima/jquery.qrcode.min.js"></script>

2、准备一个展示二维码的div

<div id="output" style="margin:0px auto"></div>

3、生成二维码的js

$("#output").empty();
jQuery('#output').qrcode("二维码的内容");//二维码生成

生成后的二维码效果

4.二维码保存

因为二维码生成后使用的是H5的canvas标签展示在jsp页面,所以将二维码保存为图片也方便了很多。canvas提供了方法。

  
function download(){
   var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值,并修改响应头部。
   var filename="tupian.png";//保存的图片名称和格式,canvas默认使用的png格式。这个格式效果最好。
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename; var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}

  

jquery生成二维码并实现图片下载的更多相关文章

  1. JQuery生成二维码,有资源下载

    原文链接:http://www.yxxrui.cn/article/65.shtml 没时间或者懒得看的,可以直接看加粗部分(或试试手感▼). 使用jquery.qrcode来生成二维码,qrcode ...

  2. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  3. jquery生成二维码图片

    1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...

  4. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

  5. jQuery生成二维码 jquery.qrcode.js

    https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...

  6. js,JQuery 生成二维码

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. jquery 生成二维码

    jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...

  8. js生成二维码以及插入图片

    先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入demo中,审查元素查看里面引用的 ...

  9. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

随机推荐

  1. 2015520吴思其 基于《Arm试验箱的国密算法应用》课程设计个人报告

    20155200吴思其 基于<Arm试验箱的国密算法应用>课程设计个人报告 课程设计中承担的任务 完成试验箱测试功能4,5,6以及SM3加密实验的实现 测试四 GPIO0按键中断实验 实验 ...

  2. 20155223 Exp3 免杀原理与实践 实验报告

    20155223 Exp3 免杀原理与实践 实验报告 实验前准备 安装Veil-Evasion 直接使用Kali快速安装命令,拒绝采用git安装命令 apt-get -y install veil-e ...

  3. 2017-2018-2 20155315《网络对抗技术》Exp9 :Web安全基础

    实验目的 理解常用网络攻击技术的基本原理. 教程1 教程2 教程3 实验内容 SQL注入攻击 XSS攻击 CSRF攻击 Webgoat前期准备 从GitHub上下载jar包 拷贝到本地,并使用命令ja ...

  4. Hibernate一对多关联关系保存时的探究

    在以前使用hibernate时,经常对保存存在关联关系的对象时,不确定是否能保存成功.    因此,特意对一对多关系的2个对象进行实践. 一.pojo类和配置文件的准备         这里有一点提前 ...

  5. Python基础(list和tuple)可变集合和‘不可变’集合

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...

  6. [Mark]Tomcat/IIS 更改 HTTP 侦听端口

    目的: IIS HTTP 侦听端口改为 8088 Tomcat HTTP 侦听端口改为 80 环境: Windows Server 2012 R2 IIS8.5 (默认端口是 80) Tomcat8. ...

  7. 微信小程序在当前页面设置其他页面的数据

    如果其他页面用到的数据是 globalData, 那么直接在当前页面修改 globalData 数据即可. 如果其他页面用到的数据是 storage, 那么直接在当前页面修改 storage 数据即可 ...

  8. beef局域网内模拟攻击

    0x0环境 主机A win10:10.51.20.60(wifi) 主机A中的虚拟机kali(攻击者):192.168.110.129(NAT) 主机A中的虚拟机win2003(受害者):192.16 ...

  9. 安装VS2013

       安装VS2013, 之前就有VS2010,安装了一个多小时,纠结,下面是截图.   1.安装   2.登录,之前就有账号了       3.这就是VS2013了.     4.测试     5通 ...

  10. java 多维数据定义

            //一维数组定义与输出class  less02{ public static void main(String[] args)  {  int stu[]=new int[]{1,2 ...