JS批量生成带文字二维码并打成压缩包
一、qrcode.js生成二维码
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>var qrcode = new QRCode("test", {text: "http://jindo.dev.naver.com/collie",width: 128,height: 128,colorDark : "#000000",colorLight : "#ffffff",correctLevel : QRCode.CorrectLevel.H
});qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.
参考：
qrcode官网
二、html2canvas.js绘制特殊样式二维码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hangge.com</title></head><body style="margin:0px"><div id="capture" style="padding: 10px; background: #f5da55; width: 200px;"><h4 style="color: #000; ">欢迎访问 hangge.com</h4></div><button type="button" name="button" onclick="convert()">开始生成</button><br><script type="text/javascript" src="js/html2canvas.js"></script><script type="text/javascript">//开始转换function convert() {html2canvas(document.body).then(canvas => {document.body.appendChild(canvas)});}</script></body>
</html>
参考：
html2canvas官网
html2canvas 将页面保存成图片
三、jszip.js创建文件夹并打压缩包，FileSaver下载文件
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {// see FileSaver.jssaveAs(content, "example.zip");
});
参考：
jszip官网
jsZip库的简单使用
总结：完整的生成二维码打压缩包代码
<html lang="zh-cn">
<head><meta charset="UTF-8"/><div id="QRcodes">div><script src="js/FileSaver.js">script><script src="js/jszip-3.1.5.js">script><script src="js/jquery-3.2.0.js">script><script src="js/qrcode.js">script><script src="js/html2canvas.js">script>
head>
<body>
<script>function len4ZipFiles(arr) {var l = 0;for (var key in arr) {l++;}return l;}/*** 根据配置拼凑要处理的html代码** @param {Array} arr 要添加的文字，以数组传入**/function generateHTML(arr, size, font_size) {var out = "", temp = "";arr.forEach(function (item) {temp += " + font_size + "px;'>" + item + "";})out ="" +" + size + "px;'>" +temp +"" +"" +"";return out;}/*** 将两个canvas合并在一起** @param {Object} dom canvas要添加的dom对象* @param {Object} canvas1 第一个canvas* @param {Object} canvas2 第二个canvas* @param {Number} padding 图片的padding，默认20* @return {String} 返回base64字符串**/function concatCanvas(dom, canvas1, canvas2, padding) {var c1h = canvas1.height,c1w = canvas1.width,// c2h = canvas2.height,// c2w = canvas2.width,/* 说明：将以上两行代码改为以下两行代码；* 原因：以上两行代码在window下显示是好的，但是放到Mac下显示会出一些问题，* 仔细发现是在Mac下,html2canvas的API返回的canvas不符合预期，在MAC环境canvas返回如下：* html2canvas($main).then(function(canvas) {* console.log(canvas); //* });* 可以看到看到canvas的width和height值和其style里的width和height的值有所不同，* 于是采用以下的方法来获得canvas的宽度和高度* 王二认为出现以上问题可能是因为分辨率的问题*/c2h = Number(canvas2.style.height.slice(0, -2));c2w = Number(canvas2.style.width.slice(0, -2));canvas = document.createElement("canvas");padding = padding || 20;/** 根据二维码、文字两个canvas，再加上padding计算出新的canvas的宽度和高度 **/canvas.height = c1h + c2h + 2.5 * padding;canvas.width = Math.max(c1w, c2w) + 2 * padding;/** end **/dom.appendChild(canvas);/** 将canvas画上白色背景 **/context = canvas.getContext("2d");context.fillStyle = "white";context.fillRect(0, 0, canvas.width, canvas.height);/** end **//** 将二维码、文字两个canvas绘画到一个canvas里 **/context.drawImage(canvas1, padding, padding, c1w, c1h);context.drawImage(canvas2, padding, 1.5 * padding + c1h, c2w, c2h);/** end **//** 返回base64,用于注入到a标签里以便下载 **/return canvas.toDataURL('image/jpeg');/** end **/}/*** 输出一个带有文字说明的二维码。** @param {Object} obj 相关配置，* var obj = {dom : "QRcode",url : "http://weixin.qq.com/q/02i8f8Aef4f0h10000M07b",text : ["【施倩雯】","数云导购客服-微信二维码"],pic_size : 300,font_size : 16,}* 回调函数中返回一个base64形式的图片，以便在回调中注入到标签中下载使用**/function getQRcodeImg(pictureName, obj, fn, zip, count) {var url = obj.url,size = obj.pic_size || 256;font_size = obj.font_size || 18;var dom = document.getElementById(obj.dom);dom.innerHTML = generateHTML(obj.text, size, font_size);var $qrcode = dom.getElementsByClassName("QR-qrcode")[0],$main = dom.getElementsByClassName("QR-main")[0];new QRCode($qrcode, {text: url,width: size,height: size,});html2canvas($main).then(function (canvas) {var base64 = concatCanvas(dom, $qrcode.getElementsByTagName("canvas")[0], canvas, 20);var img_arr = base64.split(',');zip.file(pictureName, img_arr[1], {base64: true});//根据base64数据在压缩包中生成jpg数据var ziplength = len4ZipFiles(zip.files);if (ziplength == count) {//当所有图片都已经生成打包并保存zipzip.generateAsync({type: "blob"}).then(function (content) {// see FileSaver.jssaveAs(content, "example.zip");});}});}function downnloadQRcodes() {var zip = new JSZip();zip.file("Hello.txt", "Hello World\n");var img = zip.folder("images");//img.file("smile.gif", imgData, {base64: true});var count = 50;var dom = document.getElementById("QRcodes");var innerHTML = "";for (var i = 0; i < count; i++) {innerHTML = innerHTML + ' + i + '">';}dom.innerHTML = innerHTML;for (var i = 0; i < count; i++) {var name = "【施倩雯】" + i;var domName = "QRcode-" + i;var pictureName = "文件名称-" + i + ".png";var obj = {dom: domName,url: "http://weixin.qq.com/q/02i8f8Aef4f0h10000M07b",text: [name, "数云导购客服-微信二维码"],pic_size: 300,font_size: 16,}getQRcodeImg(pictureName, obj, function (base64) {}, zip, count + 2);}}downnloadQRcodes();
script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！