js image

// 示例代码：使用 JavaScript 操作图像

// 创建一个新的 Image 对象
const img = new Image();

// 设置图像的 src 属性，加载图像
img.src = 'https://example.com/path/to/image.jpg';

// 当图像加载完成后执行的回调函数
img.onload = function() {
    // 获取页面中的 canvas 元素
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 将图像绘制到 canvas 上
    ctx.drawImage(img, 0, 0);

    // 输出图像的宽度和高度
    console.log('Image width:', img.width);
    console.log('Image height:', img.height);
};

// 如果图像加载失败，输出错误信息
img.onerror = function() {
    console.error('Failed to load image');
};

解释说明：

1. 创建 Image 对象：通过 new Image() 创建一个新的图像对象。
2. 设置 src 属性：通过 img.src 设置图像的 URL，开始加载图像。
3. onload 回调：当图像成功加载后，img.onload 回调函数会被触发。在这个回调中，可以对图像进行进一步的操作，比如将其绘制到 <canvas> 上。
4. onerror 回调：如果图像加载失败，img.onerror 回调函数会被触发，可以在这里处理错误情况。

这段代码展示了如何使用 JavaScript 加载和操作图像，并将其绘制到 HTML5 的 <canvas> 元素上。