jquery二维码生成插件jquery.qrcode.js,生成二维码并下载
下载插件:
在GitHub上,下载qrcode二维码插件: https://github.com/jeromeetienne/jquery-qrcode
Vue项目可直接通过node.js安装:npm install --save qrcode.vue(在项目根目录下通过cmd远行)
import QRCode from 'qrcodejs2' // 引用插件
let qrcode = new QRCode(("qrcode"), { text: text, width: 140, height: 140}); // text 为内容
$("#qrcode").hide(); // 隐藏div,将二维码显示在img标签中。然后可用于下载图片
var canvas = $("canvas")[0];
$('#imgCanvas').attr('src',canvas.toDataURL('image/jpg')); // imgCanvas为一个img标签
vue end
如何使用它
将jquery.qrcode.min.js和jquery添加到您的网页中
|
|
然后创建一个DOM元素去包含生成qr码。
|
|
然后你在此容器中的添加qrcode
|
|
就这么简单,您想要的二维码就生成了。
进阶用法
指定二维码的生成方式:
可以在调用函数的同时输入想要的二维码生成方式(table/canvas)。
|
|
指定生成二维码的大小:
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
|
//text 属性的值长度不能太长,最大字节数 10208 //text 字符串太长 微信/支付宝等扫一扫无法识别,微博识别内容更多 //微博扫一扫:大约200 字以内,微信扫一扫:大约 160字以内,支付宝扫一扫:大约130字符以内
|
指定生成二维码的色彩样式:
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
|
|
中文ULR生成方法:
|
识别中文 我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用 charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容, 在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:
以下示例:
|
将生成的二维码转换成图片格式:
<div id="divOne"></div>
<img id='imgOne' style='border:1px solid red;'/>
<script>
//默认使用Canvas生成,并显示到图片
var qrcode= $('#divOne').qrcode('http://www.gongjuji.net/').hide();
var canvas=$('canvas')[0];
$('#imgOne').attr('src',canvas.toDataURL('image/jpg'))
</script>
显示结果:
在当前的图片上添加文字或logo处理:
//默认使用Canvas画图
var qrcode = $('#code').qrcode({
text: '@url',
width: 400,
height: 400
}).hide();
//添加文字
var text = "测试文字内容";//设置文字内容
var canvas = qrcode.find('canvas').get(0);
var oldCtx = canvas.getContext('2d');
var imgCanvas = document.getElementById('imgCanvas');
var ctx = imgCanvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0,0,imgCanvas.width,imgCanvas.height);
ctx.putImageData(oldCtx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
ctx.fillStyle = 'red';
ctx.strokStyle = 'rgb(1,1,0)';
//ctx.stroke = 3;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = 'bolder 30px Helvetica';
ctx.fillText(text, imgCanvas.width / 2, imgCanvas.height - 20);
ctx.strokeText(text, imgCanvas.width / 2, imgCanvas.height - 20);
imgCanvas.style.display = 'none';
$('#imgCode').attr('src', imgCanvas.toDataURL('image/png')).css({
maxWidth:300
});
下载图片:
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);
}
怎么重新生成二维码; 一个div重复调用qrcode会错位
在生成之前把这个div 清空就好了
怎样在二维码的中间加入头像呢,有没有大神知道的
css设置个div浮动层,让它浮在二维码上剧中就行了
更多推荐
所有评论(0)