菜单
展开边栏 收起边栏

手机联系人生成二维码 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>



 

时间不早了,先休息了!!!

Copyright © 2008-. JiangFei.net all rights reserved
苏ICP备18062911号