H5页面canvas绘制多张图片和二维码生成

TinaAsura

已于 2023-01-06 17:38:34 修改

阅读量547

点赞数

分类专栏： js vue 文章标签： vue 跨域 Powered by 金山文档

于 2023-01-06 17:36:10 首次发布

本文链接：https://blog.csdn.net/srttina/article/details/128581065

版权

在Vue的H5页面中，利用canvas技术创建海报图，包括背景底图、头像、文字及二维码的绘制。通过npm安装qrcode库生成二维码，并解决图片跨域问题以确保在手机端正常显示。由于图片绘制的叠加效果，使用了异步处理防止内容被遮挡。

摘要由CSDN通过智能技术生成

vue的h5页面生成canvas海报图,要求绘制一张背景底图，在背景图上绘制头像，文字和二维码，最后合成一张图片

npm install --save qrcode 下载生成二维码的依赖包

<template>
  <div>
    <div @click="fncreatQode">点击生成海报</div>
    <div class="" >
      <div class="postsavebtn">长按保存海报</div>
      <div class="postimg">
        <!-- 展示海报图 -->
        <img :src="canvasimg"  />
      </div>
      <!-- 生成二维码canvas -->
      <canvas id="postcanvas" class="postcanvas" style="width: 510px;height: 900px;"></canvas>
    </div>

  </div>

</template>

<script>
  import QRCode from 'qrcode'
  export default {
    data(){
      return {
        qodePicture:'',
        canvasimg:'',
      }
    },
    moun