在Vue项目中使用html2canvas生成页面截图并上传
引入cnpm install html2canvas.
html代码
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --><div class="image_tofile" ref="imageTofile">
<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">
js代码
// 引入html2canvasimport html2canvas from 'html2canvas'
// 注册组件
data() {
return {
htmlUrl: ''
}
},
components: {
html2canvas
},
methods: {
// 页面元素转图片
toImage() {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png');
this.htmlUrl = url;
// 把生成的base64位图片上传到服务器,生成在线图片地址
this.sendUrl();
})
},
// 图片上传服务器
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: this.htmlUrl
}).then(res => {
if (res.code && res.data) {
}
})
}
}
以上是 在Vue项目中使用html2canvas生成页面截图并上传 的全部内容, 来源链接: utcz.com/z/380873.html