js怎么获取图片的原始大小

在JavaScript中获取图片的原始大小，可以通过创建一个新的Image对象、使用HTML5的File API、监听图片的加载事件。详细描述一下，通过创建一个新的Image对象来获取图片的原始大小是一种简单且常用的方法，它不依赖于图片在DOM中的位置或样式属性。

一、创建Image对象获取图片原始大小

创建一个新的Image对象，可以在JavaScript中轻松获取图片的原始宽度和高度。以下是步骤和示例代码：

1. 创建Image对象

首先，需要创建一个新的Image对象，并设置其src属性为目标图片的URL。

var img = new Image();
img.src = 'path/to/your/image.jpg';

2. 监听图片加载事件

由于图片加载是一个异步过程，需要监听Image对象的onload事件，以便在图片加载完成后获取其原始大小。

img.onload = function() {
    var originalWidth = img.width;
    var originalHeight = img.height;
    console.log('Original Width:', originalWidth);
    console.log('Original Height:', originalHeight);
};

通过上述代码，可以在图片加载完成后，获取到图片的原始宽度和高度。

二、使用HTML5 File API获取图片原始大小

HTML5的File API允许用户通过文件输入（input type="file"）选择图片，并在客户端读取其原始大小。

1. 创建文件输入元素

首先，创建一个文件输入元素，让用户选择图片。

<input type="file" id="fileInput">

2. 读取文件并获取图片原始大小

在JavaScript中，监听文件输入元素的change事件，以便在用户选择图片后读取其原始大小。

document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    var img = new Image();
    var reader = new FileReader();
    reader.onload = function(e) {
        img.src = e.target.result;
    };
    img.onload = function() {
        var originalWidth = img.width;
        var originalHeight = img.height;
        console.log('Original Width:', originalWidth);
        console.log('Original Height:', originalHeight);
    };
    reader.readAsDataURL(file);
});

通过上述代码，可以在用户选择图片后，读取其原始宽度和高度。

三、使用图片对象的naturalWidth和naturalHeight属性

在现代浏览器中，可以直接使用图片对象的naturalWidth和naturalHeight属性来获取图片的原始大小。这些属性表示图片的原始宽度和高度，无需额外的Image对象或File API。

1. 获取图片元素

首先，获取图片的DOM元素。

<img id="myImage" src="path/to/your/image.jpg">

var img = document.getElementById('myImage');

2. 获取图片的原始大小

在JavaScript中，可以直接访问图片的naturalWidth和naturalHeight属性，以获取其原始宽度和高度。

img.onload = function() {
    var originalWidth = img.naturalWidth;
    var originalHeight = img.naturalHeight;
    console.log('Original Width:', originalWidth);
    console.log('Original Height:', originalHeight);
};

通过上述代码，可以在图片加载完成后，直接获取其原始宽度和高度。

四、使用Canvas获取图片原始大小

Canvas是一种强大的绘图工具，也可以用来获取图片的原始大小。通过将图片绘制到Canvas上，可以轻松获取其宽度和高度。

1. 创建Canvas元素

首先，创建一个Canvas元素。

<canvas id="myCanvas"></canvas>

2. 绘制图片并获取其原始大小

在JavaScript中，获取Canvas元素，并将图片绘制到Canvas上，然后获取其宽度和高度。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    var originalWidth = img.width;
    var originalHeight = img.height;
    console.log('Original Width:', originalWidth);
    console.log('Original Height:', originalHeight);
};

通过上述代码，可以在图片加载完成后，将其绘制到Canvas上，并获取其原始宽度和高度。

五、总结

通过以上几种方法，可以在JavaScript中轻松获取图片的原始大小。每种方法都有其优点和适用场景，开发者可以根据具体需求选择合适的方法。

创建Image对象：简单、常用，不依赖于图片在DOM中的位置或样式属性。
使用HTML5 File API：适用于用户上传图片的场景。
naturalWidth和naturalHeight属性：现代浏览器支持，直接获取图片的原始大小。
使用Canvas：适用于需要对图片进行进一步处理或操作的场景。

无论选择哪种方法，都可以有效地获取图片的原始大小，为后续的图像处理和操作提供便利。