我在vue.js组件中使用html2canvas。在表单提交中,它获取div'.img-container'的屏幕截图,将其转换为base64格式并将其保存到数据库。尽管Firefox出现以下错误,并且无法继续提交表单,但它在Chrome和Safari上仍能正常工作:
这是我的代码。方法'Submit'-使用html2canvas截屏,完成后-调用'SubmitWithAvatar'方法进行Ajax提交。
submitWithAvatar() {
let error_message;
let data = this.getJsonData();
axios.post('/avatar', data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function (response) {
window.location.replace('/confirmation');
}).catch(function (error) {
this.loading = false;
if (error.response.data.status == 'error') {
error_message = error.response.data.message;
console.log(error_message);
}
}).then(() => {
this.error_message = error_message;
})
},
submit() {
var image64;
this.$refs['avatarForm'].validate((valid) => {
if (valid) {
this.loading = true;
html2canvas($('.img-container').get(0)
).then((canvas) => {
image64 = canvas.toDataURL();
}).then(() => {
this.avatarForm.candy_img = image64;
this.submitWithAvatar();
}).catch((error) => {
console.log("Erorr", error)
this.submitWithAvatar();
})
} else {
return false;
}
})
}