Как мне заставить html2canvas работать в Firefox? - PullRequest
0 голосов
/ 14 сентября 2018

Я использую html2canvas в компоненте vue.js. При отправке формы он делает снимок экрана с div'ом .img-container, преобразовывает его в формат base64 и сохраняет его в базе данных. Он отлично работает в Chrome и Safari, хотя Firefox выдает следующую ошибку и не может продолжить отправку формы:

enter image description here Предупреждение: не отвечает скрипт

Вот мой код. Метод '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;
      }
    })
  }
...