将html元素变成canvas进行图片保存/截图
只会cv的小前端 人气:11将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; } }); }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容