疆飞
.NET永远年轻，永远热泪盈眶...
展开边栏 收起边栏
手机联系人生成二维码 vCard
最近做了一个电子名片，实现了在web端直接将联系人生成为二维码，暂时没有找到更好的办法，不知道通过浏览器能否直接实现向手机通讯录里添加联系人，所以现在只能借助微信的二维码功能来实现这个效果。
先看下效果：
事实上没有扫描二维码这一步更好，如果哪位朋友知道怎么解决，麻烦告诉一下。我知道微信小程序可以，因为微信有通讯录权限，好像浏览器一般是不具备这个权限的。
下面再说说实现方法，实际上将联系人生成为二维码不稀奇，vCard 有已经有了规范，这个时候就需要用到 jquery-qrcode 传送门 但是在我测试的时候发现做出来以后由于生成的二维码是 canvas 类型，这个类型在微信里无法实现长按识别，于是乎又找了附加的方案，将图标转为 base64 ，这样就可以实现上面的效果了！
下面是具体的源码演示：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1,user-scalable=no">
<title>疆飞-电子名片</title>
<script src="http://wx.saic-wifi.com/assets/js/js_api.js"></script>
<meta name="description" content="" />
<meta name="author" content="" />
<link href="mp/css/master.css" rel="stylesheet" type="text/css" />
<link href="mp/css/theme/themeYellow.css" rel="stylesheet" type="text/css" />
<link href="mp/css/flexslider.css" rel="stylesheet" type="text/css" />
<link href="mp/css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="mp/css/jpreloader.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<script src="img/jquery.js" ></script>
<script src="mp/jquery.qrcode.min.js"></script>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Content -->
<div id="content" class="inner">
<div id="content-wrapper">
<div id="content-header"></div> <!-- Content Header -->
<div id="content-core-wrapper">
<div id="content-core">
<!-- Intro -->
<!-- Resume -->
<div id="resume" class="content-list">
<div class="one-three">
<div class="photo-frame">
<img src="/uploadfile/2018/1227/thumb_196_196_20181227030230984.png" alt="Photo of me" height="196" width="196" />
</div>
</div>
<div class="two-three">
<div class="group-container">
<h2>江东传媒电子名片</h2>
<div class="resume-group">
<div class="resume-label">姓名</div>
<div class="resume-info">疆飞</div>
<div class="clearfix"></div>
</div>
<div class="resume-group">
<div class="resume-label">职务</div>
<div class="resume-info">网络研发部-技术总监</div>
<div class="clearfix"></div>
</div>
<div class="resume-group">
<div class="resume-label">电话</div>
<div class="resume-info">18888888888</div>
<div class="clearfix"></div>
</div>
<div class="resume-group">
<div class="resume-label">邮箱</div>
<div class="resume-info">mail@jiangfei.net</div>
<div class="clearfix"></div>
</div>
<div class="resume-group">
<div class="resume-label">QQ</div>
<div class="resume-info">932557101</div>
<div class="clearfix"></div>
</div>
<div class="resume-group">
<div class="resume-label">地址</div>
<div class="resume-info">武进区瑶湖路888号</div>
<div class="clearfix"></div>
</div>
</div>
<p id=""></p>
<span class="tjan">添加到通讯录</span>
</div>
<div class="full-three">
<div class="group-container">
<h2></h2>
<div class="resume-group">
<h3>业务范围</h3>
<p>设计、制作、发布代理国内各类广告业务；房屋销售；文化艺术活动交流策划咨询；展示展览服务；会展服务；市场营销策划；企业形象策划；摄影摄像服务；婚庆礼仪服务；翻译服务；大型活动组织服务；展台设计服务；舞台表演宣传服务；辅助服务；计算机、网络、机电、电子领域内的技术开发、咨询、服务、转让；计算机系统集成；网络工程、监控工程施工；计算机软硬件；文化办公用品、体育器材、日用百货、教学设备、通讯设备、机电设备、家用电器的销售及网上销售；电脑图文设计制作；室内外装饰装潢设计；建筑设计；景观设计；网站建设与维护；包装装潢印刷品印刷等。 </p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<!-- End Resume -->
</div>
</div>
<div id="content-footer"></div> <!-- Content Footer -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End Wrapper -->
<div class="bg"></div>
<div class="tcc">
<div id="imagQrDiv"></div>
<div id="code" style="display:none"></div>
<span>长按识别二维码添加到联系人</span>
</div>
<script>
$(".tjan").click(function(){
$("body").addClass("dk");
});
$(".bg").click(function(){
$("body").removeClass("dk");
});
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
var str ='BEGIN:VCARD\n'
+'VERSION:2.1\n'
+'FN:疆飞\n'
+'TEL;WORK;VOICE:18888888888\n'
+'ORG:江东传媒-网络研发部\n'
+'ROLE:技术总监\n'
+'EMAIL:mail@jiangfei.net\n'
+'X-QQ:{qq}\n'
+'ADR;WORK:;;武进区瑶湖路888号;常州市;江苏省;213200;中国\n'
+'END:VCARD\n';
//$('#code1').html(str);
var str = toUtf8(str);
$('#code').qrcode({width:200,height:200,correctLevel:0,text:str}); //任意字符串
//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
//获取网页中的canvas对象
var mycanvas1=document.getElementsByTagName('canvas')[0];
//将转换后的img标签插入到html中
var img=convertCanvasToImage(mycanvas1);
$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id
</script>
</body>
</html>
详细的代码解析：
<div id="code" style="display:none"></div>
//上面存放由qrcode生成的canvas二维码，但微信端无法长按识别
<div id="imagQrDiv"></div>
//上面存放的是转换为 base64 后的二维码图片
<script>
var str ='BEGIN:VCARD\n'
+'VERSION:2.1\n'
+'FN:疆飞\n'
+'TEL;WORK;VOICE:18888888888\n'
+'ORG:江东传媒-网络研发部\n'
+'ROLE:技术总监\n'
+'EMAIL:mail@jiangfei.net\n'
+'X-QQ:{qq}\n'
+'ADR;WORK:;;武进区瑶湖路888号;常州市;江苏省;213200;中国\n'
+'END:VCARD\n';
//上面的部分是联系人 vCard 信息，具体的字段和使用方法以后再做详细介绍
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
var str = toUtf8(str);
//上面的 toUtf8 是防止中文乱码
$('#code').qrcode({width:200,height:200,correctLevel:0,text:str});
//上面的就是将联系人生成为二维码到 #code 内
//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
//获取网页中的canvas对象
var mycanvas1=document.getElementsByTagName('canvas')[0];
//将转换后的img标签插入到html中
var img=convertCanvasToImage(mycanvas1);
$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id
</script>
时间不早了，先休息了！！！
文章搜索
联系疆飞
- QQ932557101
- emailmail@jiangfei.net
- weibo@疆飞 (@jiangfei1006)
- twitter@疆飞 (@jiangfei1006)
PS:没事不要瞎联系，除非你想请我吃饭...
热门标签更多
疆飞
香水博客
brain的技术笔记
周涛的个人博客
坎杜拉它短路啦
孟坤博客
杨学峰博客
彼岸临窗 Copyright © 2008-. JiangFei.net all rights reserved
苏公网安备32048202001026号苏ICP备18062911号