javascript实现获取图片大小及图片等比缩放的方法

一、获取图片大小

我们需要了解如何获取图片的尺寸。通过创建一个新的Image对象，并设置其源为待查询的图片URL，我们可以轻松地获取图片的宽度和高度。

```javascript

let originImage = new Image(); // 创建一个新的图片对象

function getPictureWidth(imageURL) {

originImage.src = imageURL; // 设置图片源为待查询的图片URL

return originImage.width; // 返回图片的宽度

}

function getPictureHeight(imageURL) {

originImage.src = imageURL; // 设置图片源为待查询的图片URL

return originImage.height; // 返回图片的高度

}

```

这样，通过传入图片URL给上述函数，即可轻松获取到图片的宽度和高度。

二、图片等比缩放

接下来，我们如何对图片进行等比缩放。等比缩放意味着在保持图片宽高比不变的情况下调整图片尺寸。以下是一个简单的实现方法：

```javascript

function scaleImage(imgElement, targetWidth, targetHeight) {

let image = new Image(); // 创建新的图片对象用于计算尺寸

image.src = imgElement.src; // 设置图片源为待缩放图片的URL

if (image.width > 0 && image.height > 0) { // 确保图片尺寸已经获取到

let originalWidth = image.width; // 原图宽度

let originalHeight = image.height; // 原图高度

let scaleWidth = targetWidth / originalWidth; // 计算宽度缩放比例

let scaleHeight = targetHeight / originalHeight; // 计算高度缩放比例

// 选择合适的比例进行缩放，保持等比关系

if (scaleWidth > scaleHeight) { // 如果宽度缩放比例大于高度缩放比例，则按宽度进行等比缩放

imgElement.width = targetWidth;

imgElement.height = Math.round(originalHeight scaleWidth);

} else { // 按高度进行等比缩放

imgElement.height = targetHeight;

imgElement.width = Math.round(originalWidth scaleHeight);

}

}

}

```

调用该函数并传入相应的图片元素、目标宽度和高度，即可实现图片的等比缩放。同时确保传入的图片元素已经存在于DOM中并具有正确的src属性。注意这里对高度的设置应放在宽度之后，因为浏览器会按照HTML的渲染顺序执行代码，先设置宽度后设置高度可以避免因宽度变化导致的布局混乱。使用Math.round()函数对计算后的高度和宽度进行取整处理，以确保显示效果的准确性。以上就是JavaScript实现获取图片大小及等比缩放的方法介绍。希望这些内容对大家有所帮助。更多关于JavaScript的内容，可查看相关专题进行深入学习。感兴趣的朋友不妨一试。还可以关注其他相关技术如DOM操作、事件处理、AJAX等，以丰富自己的JavaScript技能库。对于JavaScript的进阶学习，建议更多高级特性如异步编程、模块化开发等，以不断提升自己的编程能力。请继续关注我们的内容，我们将不断更新分享更多有价值的技术文章。