在前端的vue页面实现最简单的截图:
第一步安装html2canvas组件:
npm install html2canvas --save
第二步导入页面:
import html2canvas from'html2canvas'
第三步定义自我截图调用的方法(例如的方法为barPhoto):那你需要截图你调用此方法就行
private barPhoto() {
//指定在500毫秒后执行toImage
setTimeout(this.toImage, 500);
}
第四步定义页面元素转换图片的方法:
private toImage() {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then(canvas => {
let url = canvas.toDataURL("image/png");
this.htmlUrl = url;
// 把生成的base64位图片上传到服务器,生成在线图片地址
this.sendUrl();
});
}
第五步图片上传服务器:
private sendUrl() {
// 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
const formData = new FormData();
formData.append("base64", this.company.fileUrl);
formData.append("userId", 123);
formData.append("pathName", "pdf");
this.$ajax({
url: apiPath.common.uploadBase,
method: "post",
data: formData
}).then(res => {
if (res.code && res.data) {
return;
}
});
}
第六步页面div标签的内容:
在你想要截取内容的div标签里加上 ref="imageTofile",
接着就是你想要展示截图效果的div标签:
<div>
<img
style=" 100%;height: 100%;"
class="real_pic"
:src="htmlUrl"
crossorigin="anonymous"
/>
</div>
附加内容:
如果你想下载刚才的截图:
第一步:有一个点击下载的标签:
<div class="download" @click="downloadCodeImg">点击下载</div>
第二步:调用方法即可:
//下载图片
private downloadCodeImg() {
console.log("下载图片");
var a = document.createElement("a");
a.download = name ||"图片"; // 设置图片地址
a.href = this.htmlUrl;
a.click();
}
完美的结局总是很少,上述截图步骤少了htmlUrl的定义了:private htmlUrl: string = "";
此方法可能存在很多不足ps(我用来截超图地图就没成功!)应该可以满足一些简单的截图了.