vue3.0+TypeScript+html2Canvas生成海报方案

前端生成海报方案-html2Canvas

1.如何工作

该脚本遍历加载它的页面的DOM，收集所有元素的信息 在那里，然后它使用它来构建页面的表示。

2.支持的CSS属性和值的列表及其不支持的属性

-官方文档

3.使用方法-Roubin

• npm install --save html2canvas
  

• 在onMounted阶段获取海报所需要的数据-代码如下

  onMounted(() => {
    getYearBillInfo();
  })
  const getYearBillInfo = () => {
    queryYearBillInfo().then((res: YearBillInfo) => {
      if (res) {
        posterList.value.length = 0;
        nextTick(() => {
          posterShow.value = true;
          canvasPoster();
        })
      }
    })
  }
  

• 绘制海报-h5部分（以下是生成两张海报页面部分，根据不同需求绘制不同的页面）

     <!-- 最爱听-第一张海报页面 -->
  <div class="share-swipe-item-canvas" id="poster-favorite" v-if="posterLayoutShow">
      <img :src="shareFavoriteBg" alt="" class="share-swipe-item-img">
      <div class="share-swipe-item-text">2023年，你最喜欢听的书是<br /><span class="color-ff5c00">《{{ favoriteBookName
      }}》</span><br />这本书你一共听了 <span class="color-ff5c00">{{ favoriteListenTime }}</span>
        分钟<br />你如此着迷<br />还记得，是哪句话打动了你
      </div>
      <div class="share-swipe-item-nickname">我是{{ userNickName }}</div>
      <img :src="qrCodeAddress" alt="" class="share-swipe-item-qrcode">
    </div>
  
    <!-- IP-第二张海报页面 -->
    <div class="share-swipe-item-canvas" id="poster-ip" v-if="posterLayoutShow">
      <img
        :src="mListenType === 1 ? shareSpecialIpOneBg : mListenType === 2 ? shareSpecialIpTwoBg : mListenType === 3 ? shareSpecialIpThreeBg : shareSpecialIpFourBg"
        alt="" class="share-swipe-item-img">
      <div class="share-swipe-item-nickname">我是{{ userNickName }}</div>
      <img :src="qrCodeAddress" alt="" class="share-swipe-item-qrcode">
    </div>
  

• 绘制海报方法-canvasPoster

  import html2canvas from "html2canvas";
  /**
   * 画海报
   */
  const canvasPoster = () => {
    if (posterList.value.length < 2) {
  	 if (posterList.value.length === 1) {
        currentCanvasHtmlId.value = "poster-favorite";
      } else {
        currentCanvasHtmlId.value = "poster-special";
      }
      posterContent.value = document.getElementById(currentCanvasHtmlId.value as string);
      html2canvas(posterContent.value as any, {
        width: posterContent.value?.clientWidth, // 生成图片的宽度
        height: posterContent.value?.clientHeight, // 生成图片的高度
        scale: 2, //scale 将其调大可以解决低分辨率设备下生成的图片模糊问题
        useCORS: true, // 是否允许跨域 如果不行在img标签增加 crossOrigin="Anonymous" 属性
      }).then((canvas: any) => {
        // 生成一个base64的图片路径
        let dataURL = canvas.toDataURL("image/png");
        posterList.value.push(dataURL)
        canvasPoster();
      })
    } else {
      posterShow.value = false;
      posterLayoutShow.value = false;
    }
  }
  

  PS：具体生成海报属性值：，最常用的是代码中的width、height、scale、useCORS

​

guration)，最常用的是代码中的width、height、scale、useCORS

​ [外链图片转存中…(img-jKP8LzNI-1704418287347)]