Comments (4)
Sorry man, I think this is too edge case-y. So I think the dependency is not worth it. We could think of some mechanism to intercept file processing fron the outside, but that would probably be more complicated then implementing the component yourself.
We could leave this issue open for other users to give their two cents but the issue will be auto-closed in a month or so.
from vue-qrcode-reader.
Puh, that sounds a bit out-of-scope. I think it's not worth pulling in a PDF parsing dependency for this feature. But you can easily implement this yourself. QrcodeDropZone
is not a complicated component. The main complexity of this library comes from QrcodeStream
.
Haven't tested (or even type checked) this at all but if I just inline all internal dependencies of QrcodeDropZone
I get the following component (and you can probably remove a good chunk of that):
<template>
<div
@drop.prevent.stop="onDrop"
@dragenter.prevent.stop="onDragOver(true)"
@dragleave.prevent.stop="onDragOver(false)"
@dragover.prevent.stop
>
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { type DetectedBarcode, type BarcodeFormat, BarcodeDetector } from 'barcode-detector/pure'
import { type PropType } from 'vue'
import { type BarcodeFormat } from 'barcode-detector/pure'
const props = defineProps({
formats: {
type: Array as PropType<BarcodeFormat[]>,
default: () => ['qr_code'] as BarcodeFormat[]
}
})
const emit = defineEmits(['detect', 'dragover', 'error'])
// methods
export const eventOn = (
eventTarget: EventTarget,
successEvent: string,
errorEvent = 'error'
): Promise<Event> => {
let $resolve: (value: Event) => void
let $reject: (reason?: Event) => void
const promise = new Promise(
(resolve: (value: Event) => void, reject: (reason?: Event) => void) => {
$resolve = resolve
$reject = reject
eventTarget.addEventListener(successEvent, $resolve)
eventTarget.addEventListener(errorEvent, $reject)
}
)
promise.finally(() => {
eventTarget.removeEventListener(successEvent, $resolve)
eventTarget.removeEventListener(errorEvent, $reject)
})
return promise
}
const imageElementFromUrl = async (url: string) => {
if (url.startsWith('http') && url.includes(location.host) === false) {
throw new DropImageFetchError()
}
const image = document.createElement('img')
image.src = url
await eventOn(image, 'load')
return image
}
export const processFile = async (
file: File,
formats: BarcodeFormat[] = ['qr_code']
): Promise<DetectedBarcode[]> => {
const barcodeDetector = new BarcodeDetector({
formats
})
return await barcodeDetector.detect(file)
}
export const processUrl = async (
url: string,
formats: BarcodeFormat[] = ['qr_code']
): Promise<DetectedBarcode[]> => {
const barcodeDetector = new BarcodeDetector({
formats
})
const image = await imageElementFromUrl(url)
return await barcodeDetector.detect(image)
}
const onDetect = async (promise: Promise<any>) => {
try {
const detectedCodes = await promise
emit('detect', detectedCodes)
} catch (error) {
emit('error', error)
}
}
const onDragOver = (isDraggingOver: boolean) => {
emit('dragover', isDraggingOver)
}
const onDrop = ({ dataTransfer }: DragEvent) => {
if (!dataTransfer) return
onDragOver(false)
const droppedFiles = [...Array.from(dataTransfer.files)]
const droppedUrl = dataTransfer.getData('text/uri-list')
droppedFiles.forEach((file: File) => {
onDetect(processFile(file))
})
if (droppedUrl !== '') {
onDetect(processUrl(droppedUrl, props.formats))
}
}
</script>
from vue-qrcode-reader.
Thank you for your response.
https://www.npmjs.com/package/pdf-img-convert it has Unpacked Size of 12.9 kB, so maybe this could be suiteable, without adding a huge overhead, like pdf.js
would this be an option or do you dont wanna use any other packages?
I think such feature would let other users also benefit :)
from vue-qrcode-reader.
This issue has been marked as stale. If there is no further activity it will be closed.
from vue-qrcode-reader.
Related Issues (20)
- The automated release is failing 🚨
- CDN download link returns file does not exist HOT 2
- Serious bug(严重的bug) HOT 1
- 版本3.1.9,方法onCameraOn无效,是否含有这个方法?
- 版本3.1.9是否支持formats?如果不支持我应该如何实现? HOT 13
- Scan small DataMatrix HOT 2
- Detect and tracking don't work anymore if choose a camera with constraints HOT 9
- corresponding type declarations HOT 2
- use paused introduce around 1s to 2s of freeze HOT 4
- reading 'enumerateDevices' is undefined HOT 2
- Are formats available in vue 2? HOT 1
- Unable to read PDF417 Barcodes HOT 2
- Error on installation on Nuxt 3 HOT 1
- Incorrect file extension in "exports" (package.json) HOT 2
- Custom `wasm` file not loading correctly in Nuxt apps HOT 5
- Coponent types missing HOT 3
- TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. HOT 1
- ERROR Failed to execute 'detect' on 'BarcodeDetector': Barcode detection service unavailable. DOMException@ er@ @ HOT 11
- Unable to switch the camera once selected with the problem camera HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-qrcode-reader.