Question

我只想在网站上上传的图片必须为纵向或正方形，并且我不想裁剪图片，默认情况下，要上传的图片必须为纵向或正方形我已经搜索了网站号\数字方法使用但没有工作

知道我正在尝试这种方法，但是由于它正在运行异步，所以它也无法正常工作

如果在给定代码中提供横向图像，则在不运行时运行 hasError必须为真，但不是，因为如果条件在上述代码完成之前运行，我该怎么办

 let hasError = false;
 image = event.target.files[0];
    if (image) {
      var img = new Image();
      img.src = window.URL.createObjectURL(image);
      img.onload = function () {
        height = img.naturalHeight;
        width = img.naturalWidth;
        console.log(hasError);  // prints false
        if (height < width)  {
           hasError = true; // prints true 
           console.log(hasError);
        }
        window.URL.revokeObjectURL(img.src);
     }
    console.log(hasError); //prints flase
   }
   if(!hasError){
       .... 
   }

Answer 1

我认为您应该创建一个函数，并将图像验证移至函数中，并使用回调函数来查找图像是否有错误。

var fileInput = document.querySelector('input[type="file"]');
var preview = document.getElementById('preview'); //img tag

previewImage(function(hasError){
  if (!hasError){
    //do something
  }
});

function previewImage(callback){
  fileInput.addEventListener('change', function(e) {
    preview.onload = function() {
      
        height = this.naturalHeight;
        width = this.naturalWidth;
        if (height < width)  {
           callback(true);
        } 
        window.URL.revokeObjectURL(this.src);
        callback(false);
    };

    var url = URL.createObjectURL(e.target.files[0]);
    preview.setAttribute('src', url);
}, false);
}

上传图片之前如何在Angular中检查图片方向

1 个答案: