2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

自动生成下载二维码到本地,然后调用微信扫一扫功能

canvashtml5二维码javascript作者:东邪

在开发中,遇到一个应用场景,

1、打开一个h5页面,自动生成我们的公共号二维码;

2、讲二维码生成图片下载到本地;

3、调用微信扫一扫功能,调取本地刚刚下载好的二维码;

废话不多说,上代码,嘿嘿。


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta content="True" name="HandheldFriendly">
  <meta name="MobileOptimized" content="320">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no"/>
  <title>自动生成下载二维码</title>
  <style class="text/css" media="all">
	html,body,h1,h2,p,span,a,div,ol,ul,li,table,tbody,tfoot,thead,tr,th,td,canvas{margin:0;padding:0;}
	body{text-align:center;font-size-adjust:none;-webkit-text-size-adjust:none;font-family: Arial,"Microsoft YaHei",sans-serif;background:#ffffff;float:left;width:100%;position:relative;}
	ol,ul{list-style:none}
  </style>
 </head>
 <body>
 <div id="qr_container" style="margin:auto; position:relative;"></div>
 </div>
 </body>
 <script type="text/javascript" src="https://www.mk2048.com/js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
 <script type="text/javascript" src="https://www.mk2048.com/js/toast.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:"http://www.baidu.com"});//生成二维码
		//图片下载操作,指定图片类型
		function download(type) {
			//设置保存图片的类型
			$("canvas").attr("id","canvas1");
			var canvas = document.getElementById('canvas1');
			var imgdata = canvas.toDataURL(type);
			//将mime-type改为image/octet-stream,强制让浏览器下载
			var fixtype = function (type) {
				type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
				var r = type.match(/png|jpeg|bmp|gif/)[0];
				return 'image/' + r;
			}
			imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
			//将图片保存到本地
			var saveFile = function (data, filename) {
				var link = document.createElement('a');
				link.href = data;
				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);
				link.dispatchEvent(event);
			}
			var filename = "二维码"+new Date().toLocaleDateString() + '.' + type;
			saveFile(imgdata, filename);
		}

		setTimeout(function(){
			toast("自动下载图片");
			download("png");
		},2000);//过两秒自动下载二维码

		setTimeout(function(){
			try{	
				window.location.href = 'weixin://scanqrcode'; //ios已经调试通过,安卓还在研究中....
			}catch(e){
			
			}
		},3000);//打开微信扫一扫
	});
</script>
</html>

希望能够帮到正在开发此场景的同学。


« 上一篇:32.二维数组
» 下一篇:JS中this指向的更改
评论
点击刷新
评论
相关博文
×添加代码片段