jquery生成二维码并实现图片下载
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生成二维码并实现图片下载的更多相关文章
- JQuery生成二维码,有资源下载
原文链接:http://www.yxxrui.cn/article/65.shtml 没时间或者懒得看的,可以直接看加粗部分(或试试手感▼). 使用jquery.qrcode来生成二维码,qrcode ...
- 微信生成二维码 只需一个网址即刻 还有jquery生成二维码
<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...
- jquery生成二维码图片
1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...
- 使用jquery生成二维码
二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...
- jQuery生成二维码 jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...
- js,JQuery 生成二维码
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- jquery 生成二维码
jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...
- js生成二维码以及插入图片
先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入demo中,审查元素查看里面引用的 ...
- js生成二维码以及点击下载二维码
js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...
随机推荐
- WPF的DataTrigger绑定自身属性
原文:WPF的DataTrigger绑定自身属性 <DataTrigger Binding="{Binding RelativeSource={RelativeSource self} ...
- stm32的PWM占空比
PWM一共有两种模式,PWM1模式:CNT<CRRx为有效电平.CNT>CRRx为无效电平.PWM2模式相反. 有限电平通过设置极性来确定: TIM_OCInitStructure.TIM ...
- PHP调用WCF提供的方法
一.准备工作 1.安装wampserver:过程略 2.配置wampserver: 2.1打开php.ini文件,去掉 ;extension=php_soap.dll 这里那个分号. 也有说把这个 ; ...
- MOSFET的小信号模型和频率响应
这部分内容大部分参考W.Y.Choi的课堂讲义第三讲和第四讲:http://tera.yonsei.ac.kr/class/2007_1/main.htm 一.小信号模型 首先要明确一点,大部分情形M ...
- SICP读书笔记 1.1
SICP CONCLUSION 让我们举起杯,祝福那些将他们的思想镶嵌在重重括号之间的Lisp程序员 ! 祝我能够突破层层代码,找到住在里计算机的神灵! 目录 1. 构造过程抽象 2. 构造数据抽象 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- PAT甲题题解-1011. World Cup Betting (20)-误导人的水题。。。
题目不严谨啊啊啊啊式子算出来结果是37.975样例输出的是37.98我以为是四舍五入的啊啊啊,所以最后输出的是sum+0.005结果告诉我全部错误啊结果直接保留两位小数就可以了啊啊啊啊 水题也不要这么 ...
- 词频统计 SPEC 20160911
本文档随时可能修改,并且没有另行通知. 请确保每一次在开始修改你的代码前,读标题中的日期,如果晚于你上次阅读, 请重读一次. 老五在寝室吹牛他熟读过<鲁滨逊漂流记>,在女生面前吹牛热爱&l ...
- Linux第六周学习总结——进程额管理和进程的创建
Linux第六周学习总结--进程额管理和进程的创建 作者:刘浩晨 [原创作品转载请注明出处] <Linux内核分析>MOOC课程http://mooc.study.163.com/cour ...
- 团队作业之旅游行业APP分析
随着经济的发展,不论是在工作中的男女老少,还是在校园中的童鞋,都喜欢在假期来一场说走就走的旅行,来缓解生活中的各种压力.当然,在国家面临经济转型的情况下,更多的将工业,农业转向服务型的旅游业,各个省市 ...