如何从html 5文件获取图像宽度API

Question

我想从图像拖放中获取图像宽度和高度，html 5文件api。这是我想如何获得宽度：

function process_drop(evt) { 

     evt.stopPropagation(); 
     evt.preventDefault(); 
     var files = evt.dataTransfer.files; 

    // run through each file individually. 
    for (var i = 0, f; f = files[i]; i++) { 

     console.log('file_size=' + f.size); 

     // check if it is an image   
     if (f.type.match('image.*')) { 
      console.log('this is an image ' + f.type); 

      //try to get the file width 
      var img = new Image();   
      img.src = f; 
      console.log('img.width=' + img.width); //does not work   
     } 


    } 
} 

以像素为单位获取图像宽度和高度的正确方法是什么？

Answer 1

您不能直接使用<input type=file>对象作为<img>的来源。

先将其转换为dataURI：https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images

你也需要有Image.onload（）事件触发，然后才能试图访问宽度值。