jQuery 生成svg矢量二维码
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矢量二维码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!
jQuery实现产品对比功能附源码下载
产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,
基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。我们先来看一下htm
jquery实现拖动效果
因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了如何实现拖动效果?首先分析下拖动效果原理:1.当鼠标在被拖动对