Я использую html2canvas в компоненте vue.js. При отправке формы он делает снимок экрана с div'ом .img-container, преобразовывает его в формат base64 и сохраняет его в базе данных. Он отлично работает в Chrome и Safari, хотя Firefox выдает следующую ошибку и не может продолжить отправку формы:
Предупреждение: не отвечает скрипт
Вот мой код. Метод '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;
}
})
}