HTML5：输入类型文件-读取图像数据
[英]HTML5: Input Type File - read image data
问题描述
我想读取我使用HTML输入元素（类型为file）选择的图像文件的“宽度”和“高度”。 我的问题是，当我第一次选择图像文件时，得到的值是0/0。 当选择第二个图像文件（与哪个图像无关）时，我将获得第一个/上一个图像的正确宽度和高度值。
如何确保立即获取我选择的图像文件的宽度和高度？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="file" id="fileInput" accept="image/*" onchange="handleFiles(this.files)"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script> var img = new Image(); //set input back to default on refresh: $('#fileInput')[0].value = ""; function handleFiles(fileList) { if (!fileList.length) { console.log("No files selected!"); } else { console.log(fileList.length); console.log(fileList[0]); img.src = window.URL.createObjectURL(fileList[0]); console.log("src: " + img.src); console.log("width: " + img.width + " / height: " + img.height); img.onload = function() { window.URL.revokeObjectURL(this.src); } } } </script> </body> </html>
1 个解决方案
解决方案1
2 2017-02-18 18:13:27
您需要在onload事件中获取宽度/高度（ img.onload = function() {...} ）
请注意，正如@ guest271314所指出的那样，请使用naturalWidth / naturalHeight代替width / height
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="file" id="fileInput" accept="image/*" onchange="handleFiles(this.files)"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script> var img = new Image(); //set input back to default on refresh: $('#fileInput')[0].value = ""; function handleFiles(fileList) { if (!fileList.length) { console.log("No files selected!"); } else { console.log(fileList.length); console.log(fileList[0]); img.src = window.URL.createObjectURL(fileList[0]); console.log("src: " + img.src); img.onload = function() { window.URL.revokeObjectURL(this.src); console.log("width: " + img.naturalWidth + " / height: " + img.naturalHeight); } } } </script> </body> </html>
如何将图像从 url 沿侧面输入类型文件加载到 html5 canvas？
[英]How can I load image from url along side input type file to html5 canvas?
如何从HTML5 FileReader中的“输入类型”清除以前的文件
[英]How to clear a previous file from a 'input type' in HTML5 FileReader
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.