记录一下vue中使用html2canvas生成海报

记录在vue项目中使用html2canvas生成海报

先介绍一下html2canvas。

html2canvas是一个JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。

下面我们来介绍一下我再项目中是如何使用它生称图片的。

这是ui给的设计图，下面是我的代码。

下面是我的html部分的代码，因为这个页面是写在后台的，写在所以有些样式写成了内联，请忽略，哈哈。

    <van-overlay :show="isShowPopup" z-index="1111111" class="overlay-box">
      <div class="overlay">
        <div class="canvans-box" v-if="firstFlag">
          <div ref="canvans" class="canvans-container">
            <div class="canvans-img">
              <img src="../../assets/imgs/swiper_img.png" class="img-box" />
            </div>
            <div class="canvans-detail">
              <van-row>
                <van-col span="5">
                  <div>
                    <img src="../../assets/imgs/activityImgs/img1.png" />
                  </div>
                </van-col>
                <van-col span="9">
                  <div>一刚</div>