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

最新推荐文章于 2024-05-09 09:12:09 发布

止语_WJ

最新推荐文章于 2024-05-09 09:12:09 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： javascript canvas vue.js

本文链接：https://blog.csdn.net/qq_48365272/article/details/108828020

版权

本文记录了在Vue项目中利用html2canvas库生成海报的过程。html2canvas是一个JavaScript类库，用于在客户端将网页截图。由于浏览器渲染差异，生成的图片可能略有不同。文中介绍了UI设计图及相应的代码实现，包括HTML结构和海报生成方法。在生成海报时，为避免样式切换的视觉效果，采用了定位隐藏原有样式，并用延时器控制截图显示。

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

记录在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>
                  <div>