将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.webp').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.webp"/>
<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;
}
});
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
