Uncaught (в обещании) Состояние выполняемой команды заблокировано - PullRequest
Новая
       1

Uncaught (в обещании) Состояние выполняемой команды заблокировано

0 голосов
/ 17 сентября 2018

Я пытаюсь интегрировать библиотеку JavaScript (редактор изображений) в угловое приложение JS. Как только я смог сделать это успешно, теперь мне нужно использовать некоторые встроенные методы библиотеки, но я столкнулся с ошибкой, которая есть в названии этого поста.

Uncaught (в обещании) Состояние выполняемой команды заблокировано.

Я не могу использовать простой метод для получения необходимых деталей. Вот код, над которым я работал. Если бы кто-то мог помочь мне разобраться с этим, это было бы очень здорово. 

angular.module('testapp', [])
  .factory('ImageEditor', ['$window', function($window) {
    return $window.ImageEditor;
  }])
  .controller('testCtrl', ['$window', function($scope) {
    var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
      includeUI: {
        loadImage: {
          path: './img/test.png',
          name: 'SampleImage'
        },
        theme: whiteTheme,
        menuBarPosition: 'bottom'
      },
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      }
    });

    imageEditor.addText('Init Text');

    window.onresize = function() {
      imageEditor.ui.resizeEditor();
    }
  }]);
<!DOCTYPE html>
<html ng-app="testapp">

<head>
  <meta charset="UTF-8">
  <title>ImageEditor</title>
  <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.0/tui-color-picker.css" rel="stylesheet">
  <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
  <style>
    @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>
  

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script type="text/javascript" src="./bower_components/tui-image-editor/examples/js/theme/white-theme.js"></script>
    <script type="text/javascript" src="./bower_components/tui-image-editor/examples/js/theme/black-theme.js"></script>
</head>

<body ng-controller="testCtrl">
  <div id="tui-image-editor-container"></div>


  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
  <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.3.0/tui-code-snippet.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.color-picker/v2.2.0/dist/tui-color-picker.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tui-color-picker@2.2.0/dist/tui-color-picker.min.js"></script>

  <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>

</body>

</html>

1 Ответ

0 голосов
/ 08 октября 2018

Для производственного кода вам не нужен тайм-аут, просто цепочка обещаний.Таким образом, следующие шаги будут запускаться синхронно (то есть, как только загрузка будет завершена).Как то так: 

angular.module('testapp', [])
    .factory('ImageEditor', ['$window', function($window) {
    return $window.ImageEditor;
  }])
.controller('testCtrl', ['$window', function($scope) {
  var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
    includeUI: {
      theme: whiteTheme,
      menuBarPosition: 'bottom'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
      cornerSize: 20,
      rotatingPointOffset: 70
    }
  });

  imageEditor.loadImageFromFile('./img/test.png', 'SampleImage').then(() => {
    imageEditor.addText('Init Text');
    // more things here if you like
  });

  window.onresize = function() {
    imageEditor.ui.resizeEditor();
  }
}]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...