canvas to base 64 with angularx-codeqr

user_8312532 0
Viewed 446

I am generating a QR code in Angular with this library: https://github.com/cordobo/angularx-qrcode

I want to get the data in base64 so I can then save that image to Firebase. I am trying the following:

components.ts

const canvas = document.createElement('canvas');
const myBase64 = canvas.toDataURL('parent');
console.log(myBase64);

components.html

<qrcode id="parent" [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'" ></qrcode>

This is what I get in the console (if I click on it, it's a blank image):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABGJJREFUeF7t1AEJAAAMAsHZv/RyPNwSyDncOQIECEQEFskpJgECBM5geQICBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAgQdWMQCX4yW9owAAAABJRU5ErkJggg==

enter image description here

What I want to get is this (note the difference in base64):

data:image/png;base64,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

enter image description here

angular typescript qr-code
2 Answers

You can change the type of your qrcode element like this

<div id="container-qrcode">
   <qrcode
     [elementType]="'img'"
     [errorCorrectionLevel]="'M'"
     [qrdata]="'Write Your data'"
     [width]="'256'">
   </qrcode>
</div>

Now you can access to img and get the base64 data in the src attr

user_130447650

EDIT

I came up with the following code and added it to the angularx-qrcode demo app. The code is based on this example. The element's type can be canvas, img and url.

# File: app.component.html
<div class="qrcodeImage">
    <qrcode #parent
    [elementType]="'canvas'"
    [errorCorrectionLevel]="'M'"
    [qrdata]="'My data'"
    [width]="'256'"></qrcode>
</div>
<button (click)="saveAsImage(parent)">Download QR Code Image</button>


# File: app.component.ts
saveAsImage(parent: any) {
    if (this.elementType === "canvas") {
    // fetches base 64 data from canvas
        parentElement = parent.qrcElement.nativeElement
            .querySelector("canvas")
            .toDataURL("image/png")
    } else if (this.elementType === "img") {
        // fetches base 64 data from image
        parentElement  = parent.qrcElement.nativeElement.querySelector("img").src
        // use 'parentElement' for your firebase storage
    } else {
        alert("Set elementType to 'canvas', 'img' or 'url'.")
    }

    if (parentElement) {
        // If you want to download the image, continue here
        // converts base 64 encoded image to blobData
        let blobData = this.convertBase64ToBlob(parentElement)
        // saves as image
        const blob = new Blob([blobData], { type: "image/png" })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement("a")
        link.href = url
        link.download = "Qrcode"
        link.click()
    }
}

// Only used if you plan to download the img
private convertBase64ToBlob(Base64Image: string) {
  const parts = Base64Image.split(";base64,")
  const imageType = parts[0].split(":")[1]
  const decodedData = window.atob(parts[1])
  const uInt8Array = new Uint8Array(decodedData.length)
  for (let i = 0; i < decodedData.length; ++i) {
    uInt8Array[i] = decodedData.charCodeAt(i)
  }
  return new Blob([uInt8Array], { type: imageType })
}

Old answer

I'm the author of angularx-qrcode. A feature to download (or get the Base64 encoded string) is not implemented in the lib itself, but there is an issue where we track solutions on how to download a qrcode

So instead of reading and downloading the Base64 encoded string like in this example, you could pass the string on to your function.

As similar issues are opened on a regular basis, I'm thinking about a sample implementation in the angularx-qrcode demo app

user_33403280
Related