Question

在我的应用程序内部，当我访问我的一个html页面时，我希望控制器内部的代码尽可能快地执行。问题是我收到了错误：

错误：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：源宽度为0.

控制器正在拍摄图像，然后对其应用滤镜，然后创建一个全新的图像。然后将这个全新的图像存储在变量中。当我单击其中一个按钮时，通过获取存储在变量中的图像并将其应用于$ scope.mainImage来应用适当的过滤器，然后angularjs接管其双向数据绑定并在屏幕上显示新的过滤图像。问题是当视图最初加载时会出现原始图像（img / testing.jpg），但错误发生在控制台中，并且创建了非图像。

控制器：

app.controller('PhotoController', function ($ionicPlatform, $scope, $state, $localstorage, $ionicHistory, $http, $cordovaCapture, $cordovaFile) {

  $ionicPlatform.ready(function ($cordovaStatusbar) {

    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      $scope.mainImage = 'img/testing.jpg';


      /*
         Alot more code here
      */

      // =================================
      // piece of code where the error is occurring:

       filterImage: function(filter, args) {
        console.log("Filter = " + filter);
        if (this.pixelData) { // if multiple filters are applied
          console.log("inside this.pixelData");
          this.ctx.putImageData(this.pixelData, 0, 0);
        }
        // !!!!!!!!ERROR OCCUR HERE!!!!!!!!!!! var params = [this.ctx.getImageData(0, 0, this.c.width, this.c.height)]; // !!!!!!!ERROR OCCUR HERE!!!!!!!!!

        for (var i = 1; i < arguments.length; i++) {
          params.push(arguments[i]);
        }
        this.pixelData = this[filter].apply(this, params);
      }

      // =================================

      $scope.img1 = null;
      $scope.img2 = null;

      var originalPhoto = document.getElementById('originalPhoto');

      $scope.img1 = ApplyEffects['reset'](originalPhoto, 'jpeg').src;
      $scope.changeReset = function () {
        $scope.mainImage = $scope.img1;
      };

      $scope.img2 = ApplyEffects['memphis'](originalPhoto, 'jpeg').src;
      $scope.changeMemphis = function () {
        $scope.mainImage = $scope.img2;
      };

    });
});

HTML：

   <ion-content>
        <!-- Photo Preview -->
        <section id="photoEffect">

            <figure>
                <img id="originalPhoto" ng-src="{{$parent.mainImage}}" width="200" height="200">
            </figure>

            <button ng-click="$parent.changeReset()">Reset</button>
            <button ng-click="$parent.changeMemphis()">Memphis</button>

        </section>
    </ion-content>

如果我包装这段代码：

        var originalPhoto = document.getElementById('originalPhoto');

            $scope.img1 = ApplyEffects['reset'](originalPhoto, 'jpeg').src;
            $scope.changeReset = function () {
                $scope.mainImage = $scope.img1;
            };

            $scope.img2 = ApplyEffects['memphis'](originalPhoto, 'jpeg').src;
            $scope.changeMemphis = function () {
                $scope.mainImage = $scope.img2;
            };  

});
});

在超时函数里面说2秒然后它会起作用，但它很慢。如果我把它设置为0.5秒的较低超时，那么它会快一点，但在某些设备上它可以工作，而其他设备也没有。我希望这段代码尽可能快地执行。

在我看来，原始图像可能没有被初始化，因为它使用超时功能，但是使用$ ionicPlatform.ready我认为它应该只在初始化时运行。我对我的超时解决方案太慢而且不可靠。

错误：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：源宽度为0

0 个答案: