QRCodeVue3 - 将图像加载到 QR 码的中心

Question

尝试在 Vue3 项目的二维码中心加载图像。一直在阅读 API 在线文档，看来我应该通过“图像”参数将其作为字符串加载，但每次我尝试通过二维码加载图像时，图像都会完全消失。

我正在专门处理的页面在这里：https://www.npmjs.com/package/qrcode-vue3

下面是代码的当前工作：

<QRCodeVue3
  :width="200"
  :height="200"
  value="HelloWorld"
  :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
  image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
  :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
  backgroundColor="white"
  :dotsOptions="{
    type: 'dots',
    color: '#26249a',
    gradient: {
      type: 'linear',
      rotation: 0,
      colorStops: [
        { offset: 0, color: '#26249a' },
        { offset: 1, color: '#26249a' },
      ],
    },
  }"
  :backgroundOptions="{ color: '#ffffff' }"
  :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
  :cornersDotOptions="{ type: undefined, color: '#000000' }"
/>

最终目标我更愿意从我的资产文件夹加载图像，但我什至无法获得可以加载的简单图像。我知道这是可能的，因为我在 npm 页面上看到了示例二维码，但没有示例代码来演示它。

Answer 1

意识到我需要添加 crossOrigin = 'Anonymous' 以及我在本地图像的 url 中实现了 v-bind。最终工作方案如下：

新组件：

<QRCodeVue3
  :width="200"
  :height="200"
  value="HelloWorld"
  :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
  v-bind:image="iconUrl"
  :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
  backgroundColor="white"
  :dotsOptions="{
    type: 'dots',
    color: '#26249a',
    gradient: {
      type: 'linear',
      rotation: 0,
      colorStops: [
        { offset: 0, color: '#26249a' },
        { offset: 1, color: '#26249a' },
      ],
    },
  }"
  :backgroundOptions="{ color: '#ffffff' }"
  :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
  :cornersDotOptions="{ type: undefined, color: '#000000' }"
/>

正在加载图片：

export default {
name: "HomeView",
  components: {
    QRCodeVue3,
  },
  data() {
    return {
      iconUrl: require('../assets/ravencoin-rvn-logo.png')
    };
  },

QRCodeVue3 - 将图像加载到 QR 码的中心

QRCodeVue3 - Load image into center of QR Code

qr-code

vue.js