VueQr生成二維碼保存本地

一、VueQr簡介

VueQr是一款基於Vue.js的二維碼生成器組件，它可以輕鬆生成包含文字、鏈接、電話、郵箱等信息的二維碼，並且可以自定義二維碼的尺寸和顏色。

二、VueQr生成二維碼

在Vue項目中使用VueQr生成二維碼非常簡單。首先，我們需要安裝VueQr：

npm install vueqr --save

然後，我們就可以在Vue組件中使用VueQr了：

<template>
  <div>
    <vue-qr :text="'https://www.example.com'" :size="200" :fgColor="'#000000'" :bgColor="'#ffffff'"></vue-qr>
  </div>
</template>

<script>
import VueQr from 'vueqr';

export default {
  components: {
    VueQr
  }
}
</script>

在這個例子中，我們使用VueQr生成一個包含”https://www.example.com”鏈接的二維碼，寬度為200像素，前景色為黑色，背景色為白色。如果想生成包含其他信息的二維碼，只需要將text屬性改為相應的內容即可。

三、VueQr保存二維碼

如果我們想將生成的二維碼保存到本地，我們可以使用HTML5的canvas功能來實現。

首先，我們需要使用VueQr生成一個二維碼，並將它繪製到canvas上：

<template>
  <div>
    <canvas ref="canvas"/>
  </div>
</template>

<script>
import VueQr from 'vueqr';

export default {
  mounted () {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const qr = new VueQr({
      text: 'https://www.example.com',
      size: 200,
      fgColor: '#000000',
      bgColor: '#ffffff'
    });
    qr.draw(ctx, 0, 0);
  }
}
</script>

接下來，我們需要將canvas保存為圖片。為了兼容多個瀏覽器，我們可以使用FileSaver.js庫：

npm install file-saver --save

然後，我們就可以在Vue組件中使用FileSaver.js保存canvas為圖片了：

<template>
  <div>
    <button @click="save">保存</button>
    <canvas ref="canvas"/>
  </div>
</template>

<script>
import VueQr from 'vueqr';
import FileSaver from 'file-saver';

export default {
  mounted () {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const qr = new VueQr({
      text: 'https://www.example.com',
      size: 200,
      fgColor: '#000000',
      bgColor: '#ffffff'
    });
    qr.draw(ctx, 0, 0);
  },
  methods: {
    save () {
      const canvas = this.$refs.canvas;
      canvas.toBlob(blob => {
        FileSaver.saveAs(blob, 'qrcode.png');
      });
    }
  }
}
</script>

在這個例子中，我們在組件中添加了一個保存按鈕，並在點擊按鈕時將canvas轉換為Blob對象，並使用FileSaver.js將Blob保存為PNG圖片。

四、VueQr自定義圖片

如果我們想要使用自定義圖片作為二維碼的背景，也可以使用VueQr實現。

首先，我們需要將自定義圖片轉換為Base64格式：

import fs from 'fs';

const image = fs.readFileSync('/path/to/image.png');
const base64 = image.toString('base64');

接下來，我們需要使用VueQr的backgroundImage屬性設置自定義圖片作為二維碼的背景：

<template>
  <div>
    <button @click="save">保存</button>
    <canvas ref="canvas"/>
  </div>
</template>

<script>
import VueQr from 'vueqr';
import FileSaver from 'file-saver';

export default {
  mounted () {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const image = new Image();
    image.src = 'data:image/png;base64,' + base64;
    image.onload = () => {
      const qr = new VueQr({
        text: 'https://www.example.com',
        size: 200,
        fgColor: '#000000',
        backgroundImage: image
      });
      qr.draw(ctx, 0, 0);
    };
  },
  methods: {
    save () {
      const canvas = this.$refs.canvas;
      canvas.toBlob(blob => {
        FileSaver.saveAs(blob, 'qrcode.png');
      });
    }
  }
}
</script>

在這個例子中，我們使用VueQr的backgroundImage屬性將自定義圖片作為二維碼的背景。

五、VueQr顏色漸變

如果我們想要為二維碼使用漸變顏色，也可以使用VueQr實現。

首先，我們需要使用CSS定義一個漸變顏色：

.gradient {
  background: linear-gradient(to right, #f12711, #f5af19);
}

接下來，我們可以使用VueQr的canvas屬性，通過canvas的createLinearGradient方法實現漸變效果：

<template>
  <div>
    <canvas ref="canvas"/>
  </div>
</template>

<script>
import VueQr from 'vueqr';

export default {
  mounted () {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, '#f12711');
    gradient.addColorStop(1, '#f5af19');
    const qr = new VueQr({
      text: 'https://www.example.com',
      size: 200,
      fgColor: gradient
    });
    qr.draw(ctx, 0, 0);
  }
}
</script>

在這個例子中，我們使用VueQr的fgColor屬性將canvas的漸變效果作為二維碼的前景色。