<template>

<div>

<div @click="openFileInput" style="cursor: pointer;">从图像二维码导入</div>code>

<input id="fileInput" type="file" accept="image/*" style="display: none;" @change="handleFileChange">code>

<!-- <div v-if="decodedValue">code>

解析结果: { { decodedValue }}

</div>

<div v-else>

未找到二维码

</div> -->

</div>

</template>

<script setup>

import { ref } from 'vue';

import jsQR from 'jsqr';

const decodedValue = ref(null);

const emits = defineEmits([

'get-code-data',

])

const openFileInput = () => {

const fileInput = document.getElementById('fileInput');

if (fileInput) {

fileInput.click();

}

};

const handleFileChange = (event) => {

const file = event.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = (event) => {

const image = new Image();

image.onload = () => {

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

canvas.width = image.width;

canvas.height = image.height;

context.drawImage(image, 0, 0);

const imageData = context.getImageData(0, 0, image.width, image.height);

const code = jsQR(imageData.data, image.width, image.height);

if (code) {

decodedValue.value = code.data;

emits('get-code-data', code.data);

} else {

decodedValue.value = null;

}

};

image.src = event.target.result;

};

reader.readAsDataURL(file);

};

</script>