Binaryify / vue-qr

The Vue Component for Awesome-qr.js
MIT License
848 stars 121 forks source link

Am I able to somehow pass a File object in the logoSrc ? #142

Closed Vitomir2 closed 1 year ago

Vitomir2 commented 1 year ago

I am currently adding a feature that users will be able to upload a logo image and this to be used in the QR. Currently, I have such an File object:

File {
  lastModified: 1673542820515
  lastModifiedDate: Thu Jan 12 2023 19:00:20 GMT+0200 (Eastern European Standard Time) {}
  name: "logo.png"
  size: 30573
  type: "image/png"
  webkitRelativePath: ""
  [[Prototype]]: File
}

When I expand the [[Prototype]]: File, then I can see again the last modified fields, constructor, name, but I also can see a [[Prototype]]: Blob, however, I do not know how to exactly use this to pass it to the logoSrc. image

Vitomir2 commented 1 year ago

I just used the following method and passed the Base64 string as an image, it works like a charm:

convertImageFileToBase64(fileObject) {
    const reader = new FileReader()
    reader.onload = event => {
        this.base64img = event.target.result
    }
    reader.readAsDataURL(fileObject)
}