jQuery 生成svg矢量二维码


Posted in Javascript onAugust 09, 2016

jQuery 生成矢量svg二维码,并提供PNG,和SVG的页面下载,减轻服务端的压力。

代码如下所示:

<html> 
<head> 
<title>jQuery 生成svg矢量二维码</title> 
</head> 
<body> 
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type='text/javascript' src='raphael.js'></script>
<script type='text/javascript' src='qrcodesvg.js'></script>
<p>二维码信息:201211070014</p> 
<div id="qrcodeTable"></div> 
<p>二维码信息:gerrard</p> 
<div id="qrcodeCanvas"></div> 
<p>二维码信息:test</p> 
<div id="svg-wrap" class="svg-wrap"></div> 
<br>
<a id="a" href="javascript:saveAsPng()">下载PNG</a> 
<a id="a" href="javascript:saveAsSvg()">下载SVG</a>
<script> 
var qrcodesvg = new Qrcodesvg("http://www.baidu.com", "svg-wrap", 250);
qrcodesvg.draw();
// qrcodesvg.createSquare();
/* //jQuery('#qrcode').qrcode("this plugin is great"); 
jQuery('#qrcodeTable').qrcode({ 
render : "table", 
text : "201211070014" //根据此串生成第一个二维码 
}); 
jQuery('#qrcodeCanvas').qrcode({ 
render : "canvas", 
text : "http://www.csdn.net" //根据此串生成第二个二维码 
}); 
*/
// 下载png图片
function saveAsPng () {
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
// 把svg格式转换成canvas格式
var canvas = document.createElement('canvas'); //准备空画布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
a.download = mathRand(); //设定下载名称
a.click(); //点击触发下载 
}
// 下载svg图片
function saveAsSvg () {
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
var a = document.createElement('a');
a.href = image.src; //直接导出SVG
a.download = mathRand(); //设定下载名称
a.click(); //点击触发下载 
}
// 随机生成数字
function mathRand() { 
var num = ""; 
for(var i = 0 ; i < 6 ; i ++) { 
num+=Math.floor(Math.random()*10); 
} 
return num ;
}
</script> 
</body> 
</html>

以上所述是小编给大家介绍的jQuery 生成svg矢量二维码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 闭包
Sep 15 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 #Javascript
浅谈js基本数据类型和typeof
Aug 09 #Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 #Javascript
详解js实现线段交点的三种算法
Aug 09 #Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 #Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 #Javascript
引用jquery框架后出错的解决方法
Aug 09 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php画图实例
2014/11/05 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python开发游戏的前期准备
2019/05/05 Python
python获取txt文件词向量过程详解
2019/07/05 Python
浅谈Python __init__.py的作用
2020/10/28 Python
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
学习雷锋月活动总结
2014/07/03 职场文书
中秋节寄语2015
2015/03/24 职场文书
2015小学师德工作总结
2015/07/21 职场文书
诉讼和解协议书
2016/03/23 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers