uniapp h5页面 扫一扫功能

uniapp的h5页面,扫一扫功能,有些二维码比较小,手机扫码比较模糊,方法解决

vue页面中引入

import { Html5Qrcode,Html5QrcodeScanType,Html5QrcodeSupportedFormats, } from 'html5-qrcode';

vue DOM

<view class="reader-box" v-if="isScaning"  @click="scanClose">
			<view class="reader" id="reader"></view>
		</view>
	.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.reader {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

vue方法

scanCode() {
				this.isScaning = true;
				let that = this;
				Html5Qrcode.getCameras().then(devices => {
					if (devices && devices.length) {
						this.html5Qrcode = new Html5Qrcode('reader');
						this.html5Qrcode.start(
                {
                  width: { min: 640, ideal: 1280, max: 1920 },
                  height: { min: 480, ideal: 720, max: 1080 },
                  facingMode: { ideal: "environment" },
                  focusMode: { ideal: "continuous" },
                },
                {
                  fps: 2,
                  qrbox: { width: 300, height: 300 },
                  disableFlip: false,
                  focusMode: "continuous",
                  facingMode: "environment",
                  formatsToSupport: [
                    Html5QrcodeSupportedFormats.QR_CODE,
                    Html5QrcodeSupportedFormats.UPC_A,
                    Html5QrcodeSupportedFormats.UPC_E,
                    Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
                  ],
                  advanced: [{ zoom: 2.0 }],
                  rememberLastUsedCamera: true,
                  experimentalFeatures: {
                    useBarCodeDetectorIfSupported: true,
                  },
                  defaultZoomValueIfSupported: 2,
                  willReadFrequently: true,
                  supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
                  videoConstraints: {
                    aspectRatio: 2,
                    width: { min: 640, ideal: 1280, max: 1920 },
                    height: { min: 480, ideal: 720, max: 1080 },
                    facingMode: { ideal: "environment" },
                    focusMode: { ideal: "continuous" },
                    advanced: [{ zoom: 2.0 }],
                  },
                  autofocus: true, 
                  colorDark: "#0000ff", 
                  colorLight: "#ffffff", 
                  visualFeedback: true,
                  halfSample: true,
                }, (decodeText, decodeResult) => {
							console.log("decodeText=====   ",decodeText)
							if (decodeText) {
								this.stopScan();
								this.isScaning = false;
								let deviceNo = decodeText;

							}
						}, (err) => {
							console.log("报错:",err)
              setTimeout(() => {
                this.scanClose();
              }, 60000); // 60000毫秒等于1分钟
						});
					}
				});
			},

stopScan() {
				this.html5Qrcode.stop();
			},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值