<!VDNDOC "PageBase":"nvo_barcode","IniEvent":"PageIni">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>条形码\二维码</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			p1 {
				text-indent: 22px;
				padding: 5px 8px;
			}
			
			h4 {
				margin-left: 5px;
			}
			
			#qrcode,#barcode {
				display: inline-block;
				margin: 20px auto;
				//box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
			}
			
			#qrcode>*,#barcode>* {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-content-padded mui-text-center">
				<h3>条形码</h3>
				<div id="barcode" class="barcode"></div>
				<h5>jbarcode jQuery plugin</h5>
			</div>
			<div class="mui-content-padded">
				<p>官方：http://barcode-coder.com/en/barcode-jquery-plugin-201.html</p>
			</div>
			<img id="img-buffer" src="images/Vesn.jpg" class="mui-hidden" />
			<div class="mui-content-padded mui-text-center">
				<h3>二维码</h3>
				<div id="qrcode" class="qrcode"></div>
				<h5>jquery-qrcode</h5>
			</div>
			<br/>
			<div class="mui-content-padded mui-text-center">
				<h3>图片二维码</h3>
				<div id="qrcode-hide" class="qrcode mui-hidden"></div>
				<img id='imgQR'  class="qrcode"/> 
				<h5>jquery-qrcode 支持长按保存</h5>
			</div>
			<div class="mui-content-padded">
				<p>github地址：https://github.com/lrsjng/jquery-qrcode</p>
				<p>官方：http://larsjung.de/jquery-qrcode/</p>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script src="js/jquery.tmpl.js"></script>
		<script type="text/javascript" src="js/jquery-barcode.min.js"></script>
		<script type="text/javascript" src="js/jquery-qrcode-0.14.0.min.js"></script>
		<script src="js/vdn.js"></script>
		<script>
			$(function() {
	
				//==================二维码=======================
				//选项
				var options = {
					render: "canvas", //canvas\image\div
					minVersion: 6,
					fill: "#000000",
					text: "<!--INCLUDE:qr_text;JS-->",
					size: 128,
					radius: 0.5,
					//中央图标 2:Label 4:Image
					mode: 4, //0 无  1 显示label  4 显示图片
					mSize: 0.15,
					mPosX: 0.5,
					mPosY: 0.5,
					label: "Vesn",
					fontname: "Ubuntu",
					fontcolor: "#FF9818",
					image: $('#img-buffer')[0]
				};
				//图片二维码 支持长按保存
				 var qr=jQuery('#qrcode-hide').qrcode(options);
				 var canvas=qr.find('canvas').get(0);  
 				 $('#imgQR').attr('src',canvas.toDataURL('image/jpg')) 
			});
			/*$(function() {
				//==================条形码=======================
				$("#barcode").barcode("<!--INCLUDE:bar_text;JS-->", 
					"code128",//ean8、ean13、std25、int25、code11、code39、code93、code128（一般商品扫描使用）、codabar、msi、datamatrix
					{
					output: 'css', //渲染方式 css/bmp/svg/canvas
					//bgColor: '#ff0000', //条码背景颜色
					color: '#000000', //条码颜色
					barWidth: 2, //单条条码宽度
					barHeight: 100, //单体条码高度
					// moduleSize: 5,   //条码大小
					// posX: 10,        //条码坐标X
					// posY: 5,         //条码坐标Y
					addQuietZone: false //是否添加空白区（内边距）
				});
				//==================二维码=======================
				//选项
				var options = {
					render: "canvas", //canvas\image\div
					minVersion: 6,
					fill: "#000000",
					text: "<!--INCLUDE:qr_text;JS-->",
					size: 128,
					radius: 0.5,
					//中央图标 2:Label 4:Image
					mode: 4, //0 无  1 显示label  4 显示图片
					mSize: 0.15,
					mPosX: 0.5,
					mPosY: 0.5,

					label: "Vesn",
					fontname: "Ubuntu",
					fontcolor: "#FF9818",
					image: $('#img-buffer')[0]
				};
				//生成二维码
				jQuery('#qrcode').qrcode(options);
				
				//图片二维码 支持长按保存
				 var qr=jQuery('#qrcode-hide').qrcode(options);
				 var canvas=qr.find('canvas').get(0);  
 				 $('#imgQR').attr('src',canvas.toDataURL('image/jpg')) 
			});*/
		</script>
	</body>

</html>