Decode by Upload
Finally, with QrcodeCapture
comes another component which allows image scanning via classic file upload. Nothing is actually uploaded. Everything is happening client-side.
If you are on mobile and your browser supports it, you are not prompted with a file dialog but with your camera. So you can directly take the picture to be uploaded. Adjust this behavior with the following dropdown:
Source
vue
<template>
<div>
<p>
Capture:
<select v-model="selected">
<option
v-for="option in options"
:key="option.text"
:value="option"
>
{{ option.text }}
</option>
</select>
</p>
<hr />
<p class="decode-result">
Last result: <b>{{ result }}</b>
</p>
<qrcode-capture
@detect="onDetect"
:capture="selected.value"
/>
</div>
</template>
<script>
import { QrcodeCapture } from '../../../../src'
export default {
components: { QrcodeCapture },
data() {
const options = [
{ text: 'rear camera (default)', value: 'environment' },
{ text: 'front camera', value: 'user' },
{ text: 'force file dialog', value: null }
]
return {
result: '',
options,
selected: options[0]
}
},
methods: {
onDetect(detectedCodes) {
console.log(detectedCodes)
this.result = JSON.stringify(detectedCodes.map((code) => code.rawValue))
}
}
}
</script>