Download Image

[cianiandreadev]

Hi 👋,
I am using the version 1.7 for Vue 2.

I would like to provide the page with a button that allows to download the generated QR.

Ideally (since the page contains multiple QR code) would be awesome if the same button allows to download more then one at the same time.

How would that be possible? (If it is possible?)

Thanks in advance for your help and thanks for your great work!!

[scopewu]

@cianiandreadev Hi, you can try the .toDataURL of canvas. Looking more info on stackoverflow.com

same issue: #14

[cianiandreadev]

Thank you for your support and quick answer!! I will try as you suggested 🙂

[geisi]

If anyone else wants to implement a QR Code download function I have it working smoothly with following solution:

<template>
    <div ref="qrcode">
           <qrcode-vue :value="foo"/>
     </div>
    <button @click="downloadQrCode">Download</button>
</template>
<script setup>
...
const qrcode = ref(null)
const downloadQrCode = () => {
    let canvasImage = qrcode.value.getElementsByTagName('canvas')[0].toDataURL('image/png');
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'qrcode.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
    };
    xhr.open('GET', canvasImage);
    xhr.send();
...
}
</script>

[Sanan4li]

This is the code I used to download the QR.

 <qrcode-vue
                    id="qr-code"
                    value="https://github.com"
                    :size="200"
                    level="H"
                  />
                  
                   <button

                class="px-3 py-2 bg-white rounded-4p border-gray-100 mt-5"
                @click="downloadQr"
              >
                Download
              </button>
                   
 
 
 
 downloadQr () {
      const link = document.createElement('a')
      link.download = `qr-code.png`
      link.href = document.getElementById('qr-code').childNodes[0].toDataURL()
      link.click()
    },

[vishakha99-gif]

hello, I found one issue in this . if we download qrcode using this logic then that downloaded qrcode's background is black so that it is overlapping and i'm not able to scan the code .. so can anyone please help me with how can i change the bgcolor of generated canvas ??

Thanks in Advance

[gorkemtumkaya]

@vishakha99-gif Hey! Just try giving some margin to qrcode.
This works for me.

<template>
  <div
    ref="qrcodeContainer">
    <qrcode-vue
      ref="qrcode"
      :value="value"
      :level="level"
      :margin="4"
      :size="300" />
  </div>

  <button @click="downloadQrCode">Download</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import QrcodeVue, { Level } from "qrcode.vue";

defineProps<{
  value: string;
}>();

const level = ref<Level>("M");

const qrcodeContainer = ref();

function downloadQrCode() {
  const canvas = qrcodeContainer.value.querySelector("canvas");
  const link = document.createElement("a");
  link.download = "qr-code.png";
  link.href = canvas.toDataURL("image/png");
  link.click();
}
</script>

[maprangsoft]

If anyone else wants to implement a QR Code download function I have it working smoothly with following solution:

<template>
    <div ref="qrcode">
           <qrcode-vue :value="foo"/>
     </div>
    <button @click="downloadQrCode">Download</button>
</template>
<script setup>
...
const qrcode = ref(null)
const downloadQrCode = () => {
    let canvasImage = qrcode.value.getElementsByTagName('canvas')[0].toDataURL('image/png');
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'qrcode.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
    };
    xhr.open('GET', canvasImage);
    xhr.send();
...
}
</script>

thank you very much. 🥰