vue3如何將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖

更新時(shí)間：2022年05月24日 08:59:44 作者：只會(huì)cv的小前端

這篇文章主要介紹了vue3實(shí)現(xiàn)將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖

// 網(wǎng)頁(yè)上只有一張圖片 我們可以直接就進(jìn)行圖片保存
// 但是你想 保存這張圖片的時(shí)候 順便把下面的字也帶上  相當(dāng)于截圖  那請(qǐng)你像我這樣做
 <div id="capture" style="padding: 10px; background: #fff">
      <img :src="whoImg" style="width: 300px" alt="" />
      <h4 style="color: #000">Hello world!</h4>
 </div>
 // 觸發(fā)按鈕
 <button @click="isShow()">生成海報(bào)</button>
 //這里是創(chuàng)建一個(gè)容器 存放你待會(huì)想保存的圖片  也就是你想要的截圖
<div ref="wrapper" id="wrapper" v-show="show" @click="remove()"></div>

// 引入插件 沒(méi)有就直接下 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);
// 觸發(fā)
const isShow = () => {
   show.value = true;
   //  html2canvas的方法  傳你要截圖的盒子  會(huì)把盒子內(nèi)的所有元素都變成一張canvas圖片
   html2canvas(document.querySelector('#capture')).then((canvas) => {
   if (lock.value) {
   // 給容器加入這個(gè)canvas
      wrapper.value.appendChild(canvas);
      lock.value = 0;
    }
  });
};
// 移除這個(gè)容器內(nèi)容
const remove = () => {
      show.value = false;
      if (!lock.value) {
        lock.value = 1;
        wrapper.value.innerHTML = '';
      }
 };


}

// 圖片大小
img {
    width: 300px;
 }
 // 放canvas這個(gè)容器的大小
#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將頁(yè)面轉(zhuǎn)化為圖片

微信端將頁(yè)面截屏之后保存到本地，使用了html2canvas插加粗樣式

install

npm install --save html2canvas

在所需頁(yè)面引入

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">費(fèi)用名稱</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">繳費(fèi)金額</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來(lái)指定你需要截屏的dom

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: