vue 生成带背景图片，文字图片自定义二维码图片

ewai5740

于 2019-07-09 20:20:31 发布

阅读量3k

点赞数 3

文章标签： vue 画布二维码自定义

本文链接：https://blog.csdn.net/EY5740/article/details/95232485

版权

本文介绍了如何在Vue项目中使用画布技术生成带有背景图片和自定义文字的二维码图片，强调了CSS中position指数的重要性，并提到了需要引入的相关包及参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS注意 position的index 值。请替换代码中的图片

需要引入两个包

cnpm install qrcanvas --save
cnpm install html2canvas --save

<!-- 分享图片生成 -->
<template>
  <div class="container">
    <div class="share-img">
      <img :src="imgUrl">
    </div>
    <div class="creat-img" :style="{backgroundImage: thisimg}" ref="box">
      <div id="qrcode" class="qrcode"></div>
    &