vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

目录

• 将html元素变成canvas(海报生成),进行图片保存/截图
• 使用html2canvas将页面转化为图片

将html元素变成canvas(海报生成),进行图片保存/截图

// 网页上只有一张图片 我们可以直接就进行图片保存
// 但是你想 保存这张图片的时候 顺便把下面的字也带上  相当于截图  那请你像我这样做
 <div id="capture" style="padding: 10px; background: #fff">
      <img :src="whoImg" style="width: 300px" alt="" />
      <h4 style="color: #000">Hello world!</h4>
 </div>
 // 触发按钮
 <button @click="isShow()">生成海报</button>
 //这里是创建一个容器 存放你待会想保存的图片  也就是你想要的截图
<div ref="wrapper" id="wrapper" v-show="show" @click="remove()"></div>

// 引入插件 没有就直接下 npm install html2canvas filesaver --save
import html2canvas from 'html2canvas';

setup() {
// 随便搞张图
let whoImg=require('../assets/1.png').default;
// 绑定你的容器
let wrapper = ref();
// 控制容器显示
let show = ref(false);
// 锁 防止 多次生成
let lock = ref(1);
// 触发
const isShow = () => {
   show.value = true;
   //  html2canvas的方法  传你要截图的盒子  会把盒子内的所有元素都变成一张canvas图片
   html2canvas(document.querySelector('#capture')).then((canvas) => {
   if (lock.value) {
   // 给容器加入这个canvas
      wrapper.value.appendChild(canvas);
      lock.value = 0;
    }
  });
};
// 移除这个容器内容
const remove = () => {
      show.value = false;
      if (!lock.value) {
        lock.value = 1;
        wrapper.value.innerHTML = '';
      }
 };

}

// 图片大小
img {
    width: 300px;
 }
 // 放canvas这个容器的大小
#wrapper {
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  // 这下面是vant自定义的组件样式用的 不打紧
  z-index: var(--van-overlay-z-index);
  background-color: var(--van-overlay-background-color);
}

使用html2canvas将页面转化为图片

微信端将页面截屏之后保存到本地，使用了html2canvas插加粗样式

install

npm install --save html2canvas

在所需页面引入

import html2canvas from "html2canvas"

use

<div ref="imageWrapper">
      <div class="success">
        <div class="img">
          <img class="img-icon" src="../assets/success.png"/>
          <p style="font-weight: 600; font-size: 18px">支付成功</p>
        </div>
      </div>
      <div class="success-detail">
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">收款商家</el-col>
          <el-col :span="16" class="col-right">{{merchant}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">费用名称</el-col>
          <el-col :span="16" class="col-right">{{contName}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">缴费金额</el-col>
          <el-col :span="16" class="col-right">{{chargePrice}}元</el-col>
        </el-row>
      </div>
    </div>
    <div class="button">
      <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截图</el-button>
    </div>

vue中用ref来指定你需要截屏的dom

toImage() {
        html2canvas(this.$refs.imageWrapper).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;
          if (this.imgUrl !== "") {
            this.dialogTableVisible = true;
          }
        });
      }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。