js将网址转为二维码并下载图片
将一个网址转为二维码, 下面可以添加文字, 还提供下载功能
利用的是 GitHub上面的qrcode.js 和canvas
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<div id="QRcode"></div>
<a class="QR-download" href="#" download>下载</a>
<script src="http://www.wangyulue.com/assets/js/qrcode.js"></script>
<script src="http://www.wangyulue.com/assets/js/html2canvas.min.js"></script>
<script>
/**
* 输出一个带有文字说明的二维码。
*
* @param {Object} obj 相关配置，
* obj = {
dom : "QRcode", //
url : "http://www.wangyulue.com", //二维码网址
text : ["王玉略的个人网站","Stay Hungry, Stay Foolish."], //二维码的文字说明
pic_size : 300, // 图片的尺寸大小
font_size : 16, //说明文字的字体大小
}
* 回调函数中返回一个base64形式的图片，以便在回调中注入到<a>标签中下载使用
*
*/
function getQRcodeImg(obj,fn){
var url = obj.url,
size = obj.pic_size || 256;
font_size = obj.font_size || 18;
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);
fn && fn(base64);
});
/**
* 根据配置拼凑要处理的html代码
*
* @param {Array} arr 要添加的文字，以数组传入
*
*/
function generateHTML(arr,size,font_size){
var out = "",temp = "";
arr.forEach(function(item){
temp += "<div style='text-align:center;font-size:" +font_size+ "px;'>"+ item +"</div>" ;
})
out =
"<div style='position:absolute;opacity:0;'>" +
"<div class='QR-main' style='width: " +size+ "px;'>" +
temp +
"</div>" +
"</div>" +
"<div class='QR-qrcode' style='display:none;'></div>";
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="600" height="88" style="width: 300px; height: 44px;"></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',1);
/** end **/
}
}
var obj = {
dom : "QRcode",
url : "http://www.shenjp.top",
text : ["我的个人网站","Stay Hungry, Stay Foolish."],
pic_size : 300,
font_size : 16,
}
getQRcodeImg(obj,function(base64){
document.getElementsByClassName("QR-download")[0].href = base64 ;
}); </script>
</body>
</html>
js将网址转为二维码并下载图片的更多相关文章
- Vue中将网址、动态网址转为二维码
1. 首先需要安装相关的依赖包 npm install qrcodejs2 --save 或者 npm install qrcode2 --save 这里选择第二种方式进行安装,如图: 2.templ ...
- Springboot生成二维码并下载图片png支持打包成zip
pom.xml <!--二维码--> <dependency> <groupId>com.google.zxing</groupId> <arti ...
- jquery.qrcode.min.js(支持中文转化二维码)
详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...
- MyQR库自动为网址生成二维码
首先安装MyQR库: pip install MyQR #导包 from MyQR import myqr #生成二维码 words=你要为那个网址生成二维码 save_name=保存后的图片名 pi ...
- js生成二维码以及插入图片
先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入demo中,审查元素查看里面引用的 ...
- Asp.Net 合并图片(二维码和其他图片合并)
需求:根据网址生成二维码,然后再把二维码生成到背景图片上,然后显示在网页中 pic.ashx <%@ WebHandler Language="C#" Class=" ...
- jquery生成二维码并实现图片下载
1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...
- pbfunc外部函数扩展应用-直接在Datawindow中生成QR二维码，非图片方式
利用pbfunc外部函数在Datawindow中直接生成QR二维码,非图片方式.需要注意以下面几点: Datawindow的DataObject的单位必须为像素(Pixels). Datawindow ...
- 用一个二维码做下载地址，自动区分是 ios 还是 android
用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone 和 ipad. <html> <head> <meta http-equiv ...
随机推荐
- <YaRN><Official doc><RM REST API's>
Overview ... YARN Architecture The fundamental idea of YARN is to split up the functionalities of re ...
- shell脚本实例-shell 分析系统瓶颈脚本
#!/usr/bin/bash PS3="Your choice is: [10 for quit]" #检查是那个系统 os_check() { if [ -e /etc/red ...
- excel idea sql 操作
1.excel concatenate()函数中连接单元格中值拼接sql时,内容超长,把insert into.... values()前面的单独提出来,只在concatenate()中拼接valu ...
- Python 类变量
class Person: country = "大清" def __init__(self, name, gender): self.name = name self.gende ...
- Httpclient的学习（一）
1.名词解释 抓包: 抓包(packet capture)就是将网络传输发送与接收的数据包进行截获.重发.编辑.转存等操作,也用来检查网络安全.抓包也经常被用来进行数据截取等. Httpclient: ...
- 新建oracle数据库表空间及删除表空间和用户
进入oracle的命令控制台,按具体情况执行以下命令: sqlplus 默认数据库普通用户登录sqlplus / as sysdba 默认数据库管理员登录sqlplus username/passwo ...
- C++---String类小结
本随笔是我自己在敲代码的时候一些感受,可能有的地方简略了,还有部分是融合了一点其他资料上的知识点,如有错误欢迎指出,谢谢_(:°з」∠)_ string类是C++中常用的字符串类型,比之普通的字符串要 ...
- 关于DDOS的主动与智能防御
- 善守者藏于九地之下 - - 狡兔九窟 - 一.分配足够多的网关服务器 让用户总一个终点,可以进入游戏.多分配,动态分配,定期更新 二.用户分组分级 分组可以根据用户的生成时间, 在线时 ...
- VMware虚拟机与主机共享文件夹
VMware也可以像docker容器那样"挂载"主机上的目录给虚拟机,在虚拟机上访问共享目录就跟访问自己的目录一样方便. 1. 虚拟机(M) -> 设置(S)-> 选项 ...
- DG备库缺失归档文件GAP日志
问题现象: XXXsdgebus-dg GAP手工注册归档 #出现GAP idle>select * from v$archive_gap; THREAD# LOW_SEQUENCE# HIGH ...