Build a Vue.js QRCode Generator From Text With Logo & Watermark Using vue-qrcode in TS

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import VueQrcode from '@chenfengyuan/vue-qrcode';


const app = createApp(App);

app.component(VueQrcode.name, VueQrcode);

// Mount the app
app.mount("#app");

import { createApp } from "vue";

import "./style.css";

import App from "./App.vue";

import VueQrcode from '@chenfengyuan/vue-qrcode';

const app = createApp(App);

app.component(VueQrcode.name, VueQrcode);

// Mount the app

app.mount("#app");

App.vue

<template>
  <vue-qrcode
    value="https://freemediatools.com"
    :options="{
      errorCorrectionLevel: 'Q',
      width: 200,
      color: {
        dark: '#0074d9',
        light: '#7fdbff',
      },
    }"
    @ready="onReady"
  ></vue-qrcode>
</template>

<script>
export default {
  methods: {
    onReady(canvas) {
      const context = canvas.getContext('2d');
      const image = new Image();

      image.src = 'https://avatars.githubusercontent.com/u/3456749';
      image.crossorigin = 'anonymous';
      image.onload = () => {
        const coverage = 0.15;
        const width = Math.round(canvas.width * coverage);
        const x = (canvas.width - width) / 2;

        this.drawImage(context, image, x, x, width, width);
      };
    },

    drawImage(context, image, x, y, width, height, radius = 4) {
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 2;
      context.shadowBlur = 4;
      context.shadowColor = '#00000040';
      context.lineWidth = 8;
      context.beginPath();
      context.moveTo(x + radius, y);
      context.arcTo(x + width, y, x + width, y + height, radius);
      context.arcTo(x + width, y + height, x, y + height, radius);
      context.arcTo(x, y + height, x, y, radius);
      context.arcTo(x, y, x + width, y, radius);
      context.closePath();
      context.strokeStyle = '#fff';
      context.stroke();
      context.clip();
      context.fillStyle = '#fff';
      context.fillRect(x, x, width, height);
      context.drawImage(image, x, x, width, height);
    },
  },
}
</script>

<vue-qrcode

value="https://freemediatools.com"

:options="{

errorCorrectionLevel: 'Q',

width: 200,

color: {

dark: '#0074d9',

light: '#7fdbff',

@ready="onReady"

></vue-qrcode>

</template>

export default {

methods: {

onReady(canvas) {

const context = canvas.getContext('2d');

const image = new Image();

image.src = 'https://avatars.githubusercontent.com/u/3456749';

image.crossorigin = 'anonymous';

image.onload = () => {

const coverage = 0.15;

const width = Math.round(canvas.width * coverage);

const x = (canvas.width - width) / 2;

this.drawImage(context, image, x, x, width, width);

};

drawImage(context, image, x, y, width, height, radius = 4) {

context.shadowOffsetX = 0;

context.shadowOffsetY = 2;

context.shadowBlur = 4;

context.shadowColor = '#00000040';

context.lineWidth = 8;

context.beginPath();

context.moveTo(x + radius, y);

context.arcTo(x + width, y, x + width, y + height, radius);

context.arcTo(x + width, y + height, x, y + height, radius);

context.arcTo(x, y + height, x, y, radius);

context.arcTo(x, y, x + width, y, radius);

context.closePath();

context.strokeStyle = '#fff';

context.stroke();

context.clip();

context.fillStyle = '#fff';

context.fillRect(x, x, width, height);

context.drawImage(image, x, x, width, height);

}

</script>

<template>
  <vue-qrcode
    value="https://freemediatools.com"
    :options="{
      errorCorrectionLevel: 'Q',
      width: 200,
      color: {
        dark: '#0074d9',
        light: '#7fdbff',
      },
    }"
    @ready="onReady"
  ></vue-qrcode>
</template>

<script>
export default {
  methods: {
    onReady(canvas) {
      const context = canvas.getContext('2d');
      const image = new Image();

      image.src = 'https://avatars.githubusercontent.com/u/3456749';
      image.crossorigin = 'anonymous';
      image.onload = () => {
        const coverage = 0.15;
        const width = Math.round(canvas.width * coverage);
        const x = (canvas.width - width) / 2;

        this.drawImage(context, image, x, x, width, width);
      };
    },

    drawImage(context, image, x, y, width, height, radius = 4) {
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 2;
      context.shadowBlur = 4;
      context.shadowColor = '#00000040';
      context.lineWidth = 8;
      context.beginPath();
      context.moveTo(x + radius, y);
      context.arcTo(x + width, y, x + width, y + height, radius);
      context.arcTo(x + width, y + height, x, y + height, radius);
      context.arcTo(x, y + height, x, y, radius);
      context.arcTo(x, y, x + width, y, radius);
      context.closePath();
      context.strokeStyle = '#fff';
      context.stroke();
      context.clip();
      context.fillStyle = '#fff';
      context.fillRect(x, x, width, height);
      context.drawImage(image, x, x, width, height);
    },
  },
}
</script>