gradido/frontend/src/components/QrCode/FigureQrCode.vue

<template>
  <div class="figure-qr-code">
    <div class="qrbox">
      <div>
        <q-r-canvas :options="options" class="canvas mb-3" id="qrcanvas" />
      </div>
      <a id="download" download="GradidoLinkQRCode.png" href="" @click="downloadImg(this)">
        {{ $t('download') }}
      </a>
    </div>
  </div>
</template>
<script>
import { QRCanvas } from 'qrcanvas-vue'

export default {
  name: 'FigureQrCode',
  components: {
    QRCanvas,
  },
  props: {
    link: { type: String, required: true },
  },
  data() {
    return {
      options: {
        cellSize: 8,
        correctLevel: 'H',
        data: this.link,
      },
    }
  },
  created() {
    const image = new Image()
    image.src = 'img/gdd-coin.png'
    image.onload = () => {
      this.options = {
        ...this.options,
        logo: {
          image,
        },
      }
    }
  },
  methods: {
    downloadImg() {
      const canvas = document.getElementById('qrcanvas')
      const image = canvas.toDataURL('image/png')
      document.getElementById('download').href = image
    },
  },
}
</script>
<style scoped>
.qrbox {
  padding: 20px;
  background-color: #fff;
}
.canvas {
  width: 90%;
  max-width: 300px;
}
</style>