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

以下是详细讲解“javascript实现获取图片大小及图片等比缩放的方法”的完整攻略。

获取图片大小

在JavaScript中，获取图片大小的主要方法是通过HTML5中的Image对象获取。具体步骤如下：

1. 创建Image对象
2. 给Image对象设置图片路径
3. 等待图片加载完成
4. 当图片加载完成后，可以获取到图片的width和height属性，就可以得到图片的大小了。

以下是一个获取图片大小并在Console中输出的示例代码：

const img = new Image();
img.src = 'http://example.com/image.jpg';
img.onload = function() {
  console.log(`图片宽度：${this.width}，图片高度：${this.height}`);
};

在这个示例代码中，我们创建了一个Image对象，并将其路径设置为图片的URL。当图片加载完成后，onload函数会被调用，我们就可以在这个函数中获取到图片的大小。

图片等比缩放

图片等比缩放可以保持图片的宽高比例不变，在缩放过程中不会出现变形。具体步骤如下：

1. 计算需要缩放后的图片宽度和高度。
2. 创建一个新的Canvas元素，设置宽度和高度。
3. 将图片绘制在新的Canvas上，同时指定绘制的宽度和高度，这样图片就会等比例缩放到指定的大小。

以下是一个将图片等比缩放到指定宽度和高度的示例代码：

function resizeImage(imageUrl, maxWidth, maxHeight) {
  const img = new Image();
  img.src = imageUrl;
  return new Promise((resolve, reject) => {
    img.onload = function() {
      let width = this.width;
      let height = this.height;
      // 计算缩放后的宽度和高度
      if (width > maxWidth) {
        height = Math.round(height * maxWidth / width);
        width = maxWidth;
      }
      if (height > maxHeight) {
        width = Math.round(width * maxHeight / height);
        height = maxHeight;
      }
      // 创建新的Canvas元素
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      // 绘制图片
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      // 将Canvas转换为Base64字符串返回
      resolve(canvas.toDataURL('image/png'));
    };
    img.onerror = reject;
  });
}

在这个示例代码中，我们创建了一个resizeImage函数，传入需要缩放的图片URL以及最大宽度和高度。在函数内部，我们先创建一个Image对象并将其设置为图片URL，然后在onload函数中计算需要缩放后的宽度和高度。

接下来，我们创建一个新的Canvas元素，并设置宽度和高度。然后，我们使用getContext('2d')方法获取这个Canvas的上下文，并使用drawImage方法将图片绘制在Canvas上。

最后，我们将Canvas转换为Base64字符串，并使用resolve函数将其返回。如果发生错误，我们使用reject函数将错误信息返回。

总结

获取图片大小和图片等比缩放都是前端开发中非常常用的功能。通过上面的介绍，希望能够帮助大家更好地实现这些功能。