HTML转Canvas工具 前端生成图片工具
屏幕快照 html2canvas 下载 或上传至服务器 使用方法
<!-- 如果需要显示照片-->
<!-- <img :src="htmlUrl"> -->
<div class="app-container " ref="imageTofile" >
<!-- 会把这一部分的图截下来 用ref 指引 -->
</div>
<button @click="toImage()">提交</button>
data() {
return {
htmlUrl:''
}
methods: {
//方法1
base64ToBlob (code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new window.Blob([uInt8Array], {type: contentType, name: 'file_' + new Date().getTime() + '.jpg'});
},
//方法2:
toImage() {
var self = this;
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let dataurl = canvas.toDataURL('image/png');
console.log(dataurl)
self.htmlUrl = dataurl
//以下代码为下载此图片功能
// var triggerDownload = $("<a>").attr("href", dataurl).attr("download", "ceshi.png").appendTo("body");
// triggerDownload[0].click();
// triggerDownload.remove();
// 把生成的base64位图片上传到服务器,生成在线图片地址
let blob = self.base64ToBlob(dataurl);
//后台如果不接收base64 就转为file传参
let fileOfBlob = new File([blob],'截图.jpg'); // 重命名了
console.log('是file文件吗?')
console.log(fileOfBlob)
let jietufile = {
raw:fileOfBlob
}
self.uploadFileStatus = true;
self.fileList.push(jietufile)
// console.log(self.fileList)
// //调用接口
self.saveSupport()
})
},
//调用接口
saveSupport() {
var self = this;
var formData = new FormData();
formData.append("opinionContent", self.content);
if (self.uploadFileStatus && self.fileList.length > 0) {
for (var i = 0; i < self.fileList.length; i++) {
if (self.fileList[i].raw) {
formData.append("uploadFiles", self.fileList[i].raw);
}
}
}
html2canvasDemo.saveOpinion(formData).then(res => {
if (res && res.code == 200) {
self.$message({
showClose: true,
message: '提交成功',
type: 'success',
duration: 8000,
});
} else {
self.$message.error('提交失败');
}
})
},
},
}