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. 2017-2018 Exp8 Web基础 20155214

    目录 Exp8 Web基础 实验内容 建站过程 SQL注入 知识点 Exp8 Web基础 实验内容 实验环境 主机 Kali 靶机 Kali 实验工具 后台语言 'PHP' 服务器 'Apache' ...

  2. Exp02

    使用netcat后门工具 原理示意图 使用netcat获取主机操作Shell,cron启动 Win获取Linux Shell Linux获取Win Shell cron启动 用man -k指令查看有关 ...

  3. python 回溯法 子集树模板 系列 —— 11、全排列

    问题 实现 'a', 'b', 'c', 'd' 四个元素的全排列. 分析 这个问题可以直接套用排列树模板. 不过本文使用子集树模板.分析如下: 一个解x就是n个元素的一种排列,显然,解x的长度是固定 ...

  4. docker 学习笔记(1)--常用命令

    docker pull---- 获取image(镜像)docker build---- 创建image(镜像)docker images ----查询所有的image(镜像)docker run--- ...

  5. java数据结构之hashMap

    初学JAVA的时候,就记得有句话两个对象的hashCode相同,不一定equal,但是两个对象equal,hashCode一定相同,当时一直不理解是什么意思,最近在极客时间上学习了课程<数据结构 ...

  6. 互评Final版本——可以低头,但没必要——取件帮

    基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; (1)N(Need,需求) 当今大部分在校学生由于各种原因懒于亲自去取快递,而总麻烦身边人也不是长久之计.而有些同学需 ...

  7. 11.19daily_scrum

    本阶段的工作内容为测试并且撰写笔记本APP应用的测试报告,目的在于总结测试阶段的测试以及分析测试结果,描述系统是否符合需求,测试软件功能的完善性.除了音频界面还未完成,其他部分均已开始实现测试功能,具 ...

  8. 《Linux内核分析》第一周——计算机是如何工作的?

    杨舒雯 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 课程内容 1.诺曼依体系 ...

  9. Daily Scrum - 11/13

    时间:3:00pm - 3:30pm 今天小组例会主要是任烁分享他对WP源码的code review,通过分析与讨论我们了解了背单词模块的主要类(主要是词和单词本),取词方式(调用数据库接口),算法( ...

  10. Fast R-CNN论文阅读笔记

    论文地址:Fast R-CNN R-CNN的缺陷 (1)训练是一个多级的流水线.R-CNN首先在候选目标上微调一个卷积神经网络,使用log loss.然后使用SVMs充当目标分类器,以取代softma ...