H5+ vue+扫描二维码相册

最新推荐文章于 2023-11-04 16:04:09 发布

黑色咖啡 Ken

最新推荐文章于 2023-11-04 16:04:09 发布

阅读量693

点赞数

分类专栏： MUI web前端工程师 Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a4561614/article/details/125967760

版权

Vue 同时被 3 个专栏收录

72 篇文章 2 订阅

订阅专栏

web前端工程师

24 篇文章 0 订阅

订阅专栏

MUI

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script src="js/vue.js"></script>
		<style type="text/css">
			html,
			body,
			#app {
				position: relative;
				height: 100%;
				width: 100%;
			}

			#camera {
				height: 100%;
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				align-self: center;

			}

			.van-icon {
				top: -2px;
				font-size: 30px;
				color: #fff;
			}

			#scan {
				width: 100%;
				height: 90%;
				z-index: 2;
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 1);
			}

			.tips {
				text-align: center;
				position: absolute;
				width: 100%;
				/* height: 100%; */
				top: 0%;
				color: #fff;
				z-index: 3;
				left: 0%;
				flex: 1;
				display: contents;
			}

			.action {
				position: fixed;
				z-index: 777999;
				width: 100%;
				left: 0;
				bottom: 0;
				height: 10%;

			}

			.action .items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				width: 100%;
				height: 100%;
				color：#fff
			}

			.action .item {
				flex: 1;
				text-align: center;
				color：#fff
			}

			.action img {
				width: 27px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div @click="openCamera">点击扫码</div>
			<div id="camera" v-if="isCamera">
				<div id="scan"></div>
				<div class="tips">加载中...</div>
				<div class="action">
					<div class="items">
						<div class="item" @click="openLight">打开灯光</div>
						<div class="item" @click="getPicture()">从相册选择</div>
						<div class="item" @click="cancelScan()">取消扫描</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			let scan = null
			new Vue({
				el: '#app', // 选择器
				data: {
					codeUrl: "",
					isLight: false,
					showEnter: false,
					extra: null,
					scan: null,
					type: "",
					isCamera: false
				},
				mounted() {

				},
				beforeDestroy() {
					if (!window.plus) return;
					scan.cancel();
					scan.close();
					// scan = null;
				},
				methods: {
					openCamera() {
						this.isCamera = true;
						setTimeout(() => {
							if (window.plus) {
								let s = plus.navigator.checkPermission("camera");
								switch (s) {
									case 'authorized':
										// 		plus.nativeUI.alert('已开启定位权限');
										// return;
										break;
									case 'denied':
										// 	plus.nativeUI.alert('已关闭定位权限');
										// return;    
										break;
									case 'undetermined':
										// 	plus.nativeUI.alert('未确定定位权限');
										// return;
										break;
									case 'unknown':
										// 	plus.nativeUI.alert('无法查询定位权限');
										// return;
										break;
									default:
										// 	plus.nativeUI.alert('不支持定位权限');
										// return;
										break;
								}
								this.startScan(); //`进入页面就调取扫一扫
							}
						}, 100)

					},
					// 打开闪光灯
					openLight() {
						this.isLight = !this.isLight;
						scan.setFlash(this.isLight);
					},
					//创建扫描控件
					startRecognize() {
						let that = this;
						if (!window.plus) return;
						scan = null;
						scan = new plus.barcode.create(
							"scan",
							[plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13, plus.barcode.CODE39, plus
								.barcode.AZTEC, plus.barcode.DATAMATRIX
							],
							// QR: QR二维码，数值为0
							// EAN13: EAN条形码标准版，数值为1
							// EAN8: ENA条形码简版，数值为2
							// AZTEC: Aztec二维码，数值为3
							// DATAMATRIX: Data Matrix二维码，数值为4
							// UPCA: UPC条形码标准版，数值为5
							// UPCE: UPC条形码缩短版，数值为6
							// CODABAR: Codabar条形码，数值为7
							// CODE39: Code39条形码，数值为8
							// CODE93: Code93条形码，数值为9
							// CODE128: Code128条形码，数值为10
							// ITF: ITF条形码，数值为11
							// PDF417: PDF 417二维条码，数值为13
							{
								frameColor: "#ca6422",
								scanbarColor: "#ca6422",
								top: '0px',
								left: '0px',
								width: '100%',
								height: '90%',
								position: 'static'
							}
						);
						plus.webview.currentWebview().append(scan); //必要的
						scan.onmarked = that.onmarked //扫码成功
						scan.onerror = that.onerror //扫码失败
					},
					// //开始扫描
					startScan() {
						if (!window.plus) return;
						this.startRecognize(); //创建控件
						setTimeout(() => {
							scan.start();
						}, 100);
					},
					// 取消扫描
					cancelScan() {
						if (!window.plus) return;
						if (scan) {
							scan.cancel(); //关闭扫描
							scan.close(); //关闭条码识别控件
							this.isCamera = false;
						}
					},
					// 识别成功
					onmarked(type, result) {
						alert('扫描结果:' + result)
						this.cancelScan()
					},
					// 识别失败
					onerror(err) {
						alert("扫码失败图片不清晰");
						console.log('扫码失败', JSON.stringify(err))
						this.cancelScan()
					},
					// 从相册选择图片扫码
					getPicture() {
						let that = this
						plus.gallery.pick(function(path) {
							plus.barcode.scan(path, that.onmarked, that.onerror);
						}, function(err) {
							alert('选择相片失败: ' + JSON.stringify(err.message));
						});
					}
				}
			})
		</script>

	</body>
</html>