如何使html2canvas在Firefox中运行?

时间:2018-09-14 05:59:43

标签: javascript vue.js cross-browser axios html2canvas

我在vue.js组件中使用html2canvas。在表单提交中,它获取div'.img-container'的屏幕截图,将其转换为base64格式并将其保存到数据库。尽管Firefox出现以下错误,并且无法继续提交表单,但它在Chrome和Safari上仍能正常工作:

enter image description here Warning: Unresponsive script

这是我的代码。方法'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;
      }
    })
  }

0 个答案:

没有答案