当前位置：首页 > article >正文

JavaScript 中 Image() 对象的属性和方法详解

article 2025/2/22 15:40:01

在 Web 开发中，我们经常需要动态加载和处理图像。JavaScript 提供了一个内置的 Image() 构造函数，可以方便地创建图像对象并在网页中使用。本文将详细介绍 Image() 对象的属性和方法，并通过示例代码演示其用法。

1. 创建 Image 对象

使用 Image() 构造函数可以创建一个新的图像对象。它可以接受两个可选参数：width 和 height，分别指定图像的宽度和高度（以像素为单位）。

// 创建一个空的图像对象
const img1 = new Image();

// 创建一个指定大小的图像对象
const img2 = new Image(200, 150);

2. 常用属性

Image() 对象具有以下常用属性：

src: 图像的 URL。这是最重要的属性，用于指定要加载的图像文件的路径。
alt: 图像的替代文本。当图像无法显示时（例如，由于网络错误或图像文件不存在），将显示此文本。
width: 图像的宽度（以像素为单位）。
height: 图像的高度（以像素为单位）。
naturalWidth: 图像的原始宽度（以像素为单位）。
naturalHeight: 图像的原始高度（以像素为单位）。
complete: 一个布尔值，指示图像是否已完全加载。
crossOrigin: 设置图像的跨域属性。允许的值为 "anonymous" 或 "use-credentials"。用于处理跨域图像的加载和使用。

const img = new Image();
img.src = 'example.jpg';
img.alt = '示例图片';
img.width = 300;
img.height = 200;

console.log(img.naturalWidth); // 输出图像的原始宽度
console.log(img.complete); // 输出图像是否已加载完成

3. 常用方法

Image() 对象没有自己特有的方法，但它继承了 HTMLElement 的所有方法。以下是一些常用的 HTMLElement 方法，也可用于 Image() 对象：

addEventListener(): 添加事件监听器。
removeEventListener(): 移除事件监听器。
onload: 图像加载完成时触发的事件。
onerror: 图像加载出错时触发的事件。

const img = new Image();
img.src = 'example.jpg';

img.onload = function() {
  console.log('图像加载完成');
  // 在此处可以安全地操作图像，例如将其绘制到 canvas 上
};

img.onerror = function() {
  console.error('图像加载失败');
};

// 使用 addEventListener 添加事件监听器
img.addEventListener('load', function() {
    console.log('图像加载完成（使用 addEventListener）');
});

4. 应用示例：预加载图像

Image() 对象常用于预加载图像，以便在需要时可以立即显示，而无需等待网络请求。

function preloadImages(urls) {
  const images = [];
  for (const url of urls) {
    const img = new Image();
    img.src = url;
    images.push(img);
  }
  return images;
}

const imageUrls = ['image1.jpg', 'image2.png', 'image3.gif'];
const preloadedImages = preloadImages(imageUrls);

// 当需要显示图像时，可以直接使用 preloadedImages 数组中的图像对象
// 例如：
// document.body.appendChild(preloadedImages[0]);