javascript 获取图片尺寸及放大图片

获取图片尺寸及放大图片是前端开发中比较常见的需求，下面介绍如何使用JavaScript实现。

获取图片尺寸

我们可以使用Image对象来获取图片的尺寸。

const img = new Image();
img.src = "image.jpg";
img.onload = function() {
  console.log(`图片宽度：${this.width}px，图片高度：${this.height}px`);
}
img.onerror = function() {
  console.log("图片加载失败");
}

通过new Image()创建一个Image对象，然后设置src属性为图片文件的URL，接着在onload事件中获取图片的宽度和高度。如果图片加载失败，则在onerror事件中进行处理。

放大图片

当用户点击图片时，我们可以将其放大，原理是在页面中插入一个定位好的div元素，然后给这个div元素设置宽高和背景图片，位置与被点击的图片重合，最后使用CSS3的transform:scale()将其放大。以下是伪代码：

// 点击图片时执行以下代码
const img = e.target;
const bgImage = img.src;
const wrapper = document.createElement("div");
wrapper.className = "img-wrapper";
wrapper.style.position = "fixed";
wrapper.style.top = img.offsetTop + "px";
wrapper.style.left = img.offsetLeft + "px";
wrapper.style.width = img.width + "px";
wrapper.style.height = img.height + "px";
wrapper.style.background = `url(${bgImage}) no-repeat center center`;
wrapper.style.backgroundSize = `${img.width}px ${img.height}px`;

document.body.appendChild(wrapper);

setTimeout(() => {
  wrapper.style.transform = "scale(2)";
}, 0);

// 点击放大后的图片时执行以下代码
wrapper.style.transform = "scale(1)";
setTimeout(() => {
  document.body.removeChild(wrapper);
}, 500)

以上代码中，我们创建了一个div元素，设置其样式使其与被点击的图片重合，并设置其背景图片、大小等属性。当用户点击图片时，我们将这个div元素插入到页面中，并设置transform:scale(2)，让图片放大。当用户再次点击放大后的图片时，我们将transform:scale(1)，让图片恢复原大小，并在0.5秒后将这个div元素从页面中移除。当然，我们需要为这个div元素添加样式，使它在隐藏和显示时有动画效果。

示例说明

示例一

我们可以在一个图片库中，使用以上代码动态地获取图片的尺寸，然后将每张图片放置在一个div元素中，并在用户点击这个div元素时执行以上代码，使图片放大。用户再次点击放大后的图片时，恢复原来的大小。

示例二

我们可以在一个博客中，使用以上代码实现图片放大功能，当用户阅读文章时，点击图片，图片放大，并显示图片的描述信息等。用户再次点击放大后的图片时，恢复原来的大小。这样，可以增加博客的用户体验。