Question

我目前正在使用角度网络应用程序，其中的一项功能是照片上传。

我想对图像尺寸进行验证，以便在图像太小时抛出错误。

这是我的代码：

public onImageDrop(evt: any) {
  evt.stopPropagation();
  evt.preventDefault();
  this.croppieImage = null;
  this.onCropeMode = true;
  const image: HTMLImageElement = new Image();
  const file: File = evt.dataTransfer.files[0];
  const myReader: FileReader = new FileReader();

  myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;
  });

  myReader.readAsDataURL(file);
  **console.log(image.height);
  console.log(image.width);**
  this.photoInDragMode = false;
  this.uplodedPhotoFileName = file.name;
  this.uplodedPhotoFileMimeType = file.type;
  this.showPhotoSaveButton = true;
  this.onCropeMode = true;
}

我的问题是

    console.log(image.height);
    console.log(image.width);

总是告诉我

> 0
> 0

如果有人能提供帮助，我非常感谢。

先谢谢大家。

Answer 1

您得到0，因为放置控制台日志时尚未加载映像。它已加载到

myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;
  });

所以您可以做类似的事情

myReader.onloadend = ((loadEvent: any) => {
    image.src = loadEvent.target.result;
    this.croppieImage = myReader.result;


  });

image.onload = function(){
  // image  has been loaded
console.log(image.height);
};

Answer 2

尝试一下

 reader.onload = (event) => { 
        var img = new Image;
        this.url = event.target.result;
        img.src = event.target.result;
        console.log(img.width);
      }

示例：https://stackblitz.com/edit/angular-file-upload-preview-yxuayc

Answer 3

HTML

FirebaseUser firebaseUser = FirebaseAuth.getInstance().getCurrentUser();
if (firebaseUser != null) {
    mUserRef = firebaseUser.child("Users").child(firebaseUser.getUid());
} else {
    Log.d("TAG", "firebaseUser is null");
}

TS

<input type='file'
       formControlName="img_name"
       class="form-control"
       (change)="readUrl($event)">

}}

使用Angular 5验证上传的图像大小

3 个答案: