JS image对象|极客笔记

JS image对象

1. 介绍

在前端开发中，我们经常需要加载和操作图片。JavaScript提供了Image对象来处理图片相关的操作，包括加载，显示和变换图片等。本文将详细介绍Image对象的使用方法和常见应用场景。

2. Image对象的创建和属性

2.1 创建Image对象

可以通过new Image()来创建一个新的Image对象。

const image = new Image();

2.2 Image对象的属性

2.2.1 width

image.width属性表示图片的宽度，单位为像素。

console.log(image.width);

2.2.2 height

image.height属性表示图片的高度，单位为像素。

console.log(image.height);

2.2.3 src

image.src属性表示图片的URL。可以通过该属性来加载图片。

image.src = 'https://example.com/image.jpg';

2.3 Image对象的事件

2.3.1 onload事件

image.onload是一个在图片加载成功后触发的事件。可以通过该事件来执行图片加载完成后的操作。

image.onload = function() {
  console.log('图片加载完成');
}

2.3.2 onerror事件

image.onerror是一个在图片加载失败时触发的事件。可以通过该事件来处理图片加载失败的情况。

image.onerror = function() {
  console.log('图片加载失败');
}

3. 图片的加载和显示

3.1 图片加载

使用image.src属性来加载图片。图片加载完成后，会触发image.onload事件。

const image = new Image();
image.onload = function() {
  console.log('图片加载完成');
}
image.src = 'https://example.com/image.jpg';

3.2 显示图片

可以通过在HTML的<img>标签中使用Image对象加载的图片来显示图片。

const image = new Image();
image.src = 'https://example.com/image.jpg';
document.getElementById('imageContainer').appendChild(image);

<div id="imageContainer"></div>

4. 图片的变换和处理

4.1 图片大小调整

4.1.1 设置图片大小

可以通过设置Image对象的width和height属性来调整图片的大小。

const image = new Image();
image.src = 'https://example.com/image.jpg';
image.width = 200;
image.height = 200;
document.getElementById('imageContainer').appendChild(image);

4.1.2 图片缩放

可以通过设置Image对象的width和height属性来实现图片的缩放。

const image = new Image();
image.onload = function() {
  // 图片宽度缩放为原来的一半
  image.width = image.width / 2;
  // 图片高度缩放为原来的一半
  image.height = image.height / 2;
  document.getElementById('imageContainer').appendChild(image);
}
image.src = 'https://example.com/image.jpg';

4.2 图片裁剪

4.2.1 使用canvas实现图片裁剪

可以使用HTML5的canvas元素来实现图片的裁剪。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 200; // 设置canvas宽度
canvas.height = 200; // 设置canvas高度
const image = new Image();
image.onload = function() {
  // 在canvas上绘制图片的指定区域
  context.drawImage(image, 0, 0, 200, 200, 0, 0, 200, 200);
  const croppedImage = new Image();
  croppedImage.src = canvas.toDataURL(); // 获取裁剪后的图片DataURL
  document.getElementById('imageContainer').appendChild(croppedImage);
}
image.src = 'https://example.com/image.jpg';

5. 常见应用场景

5.1 图片预加载

在网页中，我们常常会提前加载一些图片资源，以提高用户体验。可以使用Image对象完成图片的预加载。

const imageUrls = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'];
const imageList = [];
let loadedCount = 0;
for (let i = 0; i < imageUrls.length; i++) {
  const image = new Image();
  image.onload = function() {
    loadedCount++;
    if (loadedCount === imageUrls.length) {
      console.log('所有图片加载完成');
    }
  }
  image.onerror = function() {
    console.log('图片加载失败');
  }
  image.src = imageUrls[i];
  imageList.push(image);
}

5.2 图片懒加载

在滚动页面时，可以通过判断图片是否在可视区域内来实现图片的懒加载。可以使用Image对象来判断图片是否已加载。

const images = document.getElementsByTagName('img');
const windowHeight = window.innerHeight;
for (let i = 0; i < images.length; i++) {
  const rect = images[i].getBoundingClientRect();
  if (rect.top >= 0 && rect.top <= windowHeight) {
    const src = images[i].getAttribute('data-src');
    if (src && !images[i].src) {
      const image = new Image();
      image.onload = function() {
        images[i].src = src;
      }
      image.src = src;
    }
  }
}