Question

我是编码新手，有机会在一个项目上做一些小故事来磨牙。现在我正在努力获取个人资料图片选择并使用AngularJS裁剪成一个webapp。我选择了ngImgCropper来处理裁剪。这是一个带有样板代码的JSFiddle：http://jsfiddle.net/a2ew3yhf/50/

来自该链接的JavaScript：

this

这是我的问题。我的项目使用的是Typescript，它不支持evt.currentTarget.result，所以我收到以下错误：

var handleFileSelect=function(evt) {
  var file=evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
        $scope.myImage = evt.currentTarget.result;
    });
  };
    reader.readAsDataURL(file);
};

有没有办法解决这个问题？

Answer 1

简单解决方案

如果您确定此属性存在，请执行以下操作

 var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
             $scope.$apply(function($scope){
                  $scope.myImage = (<any>evt.currentTarget).result;
              });
      };
      reader.readAsDataURL(file);
 };

此外，您可以创建自己的界面来描述您的目标

  interface MyTarget {
        result:any;   //or type of image
  } 
  //skip some code
 $scope.myImage = (evt.currentTarget as MyTarget).result;

复杂的解决方案

您可以提供自己的ngImageCroper声明或提供当前事件的说明

   var handleFileSelect=function(evt: ImageCropEvent){
        //your    stuff
   }

资源

Write your d.ts file

使用ngImgCrop浏览Typescript

1 个答案:

简单解决方案

复杂的解决方案

资源