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();
},