vue canvas应用 —— 页面文字内容生成一张图片

遇到了一需求，根据页面内容，生成一张图片，网上查找了相关资料，可以用html2canvas来实现。具体实现如下：

（1）首先，安装 html2canvas 库：

引入方式：

npm安装： npm install --save html2canvas

yarn安装： yarn add html2canvas

（2）页面中引入：

import html2canvas from 'html2canvas'

（3）具体使用：

先来放一下效果图，根据页面内容生成了一张包含相关信息的透明图片，如下图所示：

1）只有活动说明时：宽度为容器宽度，不需要根据文字来计算：
2）有价格和活动说明时，需要根据左边文字宽度来计算绘制矩形的宽度：

3）有标题、价格和活动说明时，同样需要根据左边文字宽度来计算绘制矩形的宽度：

完整代码如下：

<template>
  <div class="add-pic-mark-container">
    <el-form :model="formData" label-width="120px" ref="form" :rules="formRules" v-loading="loading">
      <h3 class="title">素材配置信息：</h3>
      <div class="bottom-con">
        <div class="form-con left-con">
          <el-form-item label="区域颜色：">
            <bg-color :bgData="formData.priceColor" @updateC1="setPriceAreaColor" @updateC2="setPriceAreaColor" :title="''"></bg-color>
          </el-form-item>
          <el-form-item label="标题：">
            <div class="item-con">
              <el-input v-model="formData.priceTitle" clearable placeholder="请输入标题" :maxlength="maxLen"></el-input>
              <el-color-picker v-model="formData.priceTitleColor"></el-color-picker>
            </div>
          </el-form-item>
          <el-form-item label="价格：">
            <div class="item-con">
              <el-input v-model="formData.price" clearable placeholder="请输入价格" :maxlength="maxLen"></el-input>
              <el-color-picker v-model="formData.priceWordColor"></el-color-picker>
            </div>
          </el-form-item>
          <el-form-item label="活动颜色：">
            <bg-color :bgData="formData.activityColor" @updateC1="setActivityAreaColor" @updateC2="setActivityAreaColor" :title="''"></bg-color>
          </el-form-item>
          <el-form-item label="活动说明：" prop="activityDesc">
            <div class="item-con">
              <el-input v-model="formData.activityDesc" clearable placeholder="请输入活动说明" :maxlength="maxLen"></el-input>
              <el-color-picker v-model="formData.activityDescColor"></el-color-picker>
            </div>
          </el-form-item>
          <el-form-item label="透明图片：">
            <img :src="formData.imgUrl" alt srcset />
          </el-form-item>
        </div>
      </div>
      <el-form-item>
        <el-button @click="saveHandle" type="primary">保存</el-button>
        <el-button @click="cancleHandle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import BgColor from '@/views/homepage/components/bgcolor.vue'

export default {
   
  name: 'AddMark',
  components: {
   
    BgColor
  },
  data () {
   
    return {
   
      loading: false,
      maxLen: 36,
      priceBgColor: '',
      activityBgColor: '',
      formData: {
   
        priceColor: [],
        priceTitle: '',
        priceTitleColor: '#EBD0B5',
        price: '',
        priceWordColor: '#EBD0B5',
        activityColor: [],
        activityDesc: '',
        activityDescColor: '#EBD0B5',
        imgUrl: ''
      },
      formRules: