js 手机查看大图片尺寸

在JavaScript中查看手机上大图片的尺寸（宽度和高度），可以通过以下几种方法实现：

一、基本原理

获取图片尺寸主要涉及到Image对象的使用。Image对象允许你加载图片并获取其原始宽度和高度属性，而无需将图片绘制到页面上。

二、实现方法

方法一：使用`Image`对象

function getImageDimensions(url, callback) {
    const img = new Image();
    img.onload = function() {
        callback(null, { width: img.width, height: img.height });
    };
    img.onerror = function(error) {
        callback(error);
    };
    img.src = url;
}

// 使用示例
const imageUrl = 'https://example.com/large-image.jpg';
getImageDimensions(imageUrl, function(err, dimensions) {
    if (err) {
        console.error('加载图片失败:', err);
    } else {
        console.log('图片宽度:', dimensions.width);
        console.log('图片高度:', dimensions.height);
    }
});

优势：

简单直接，适用于大多数场景。
不需要将图片渲染到DOM中，节省资源。

方法二：使用`fetch` API获取图片二进制数据

async function getImageSize(url) {
    try {
        const response = await fetch(url, { method: 'HEAD' });
        if (!response.ok) throw new Error('网络响应不是OK');
        const contentLength = response.headers.get('Content-Length');
        // 注意：仅Content-Length无法获取尺寸，需要进一步处理
        // 实际上，获取尺寸仍需加载图片，故此方法主要用于检查图片是否存在及大小
        return null; // 需结合其他方法
    } catch (error) {
        console.error('获取图片信息失败:', error);
    }
}

// 结合Image对象获取尺寸
async function getImageDimensions(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve({ width: img.width, height: img.height });
        img.onerror = reject;
        img.src = url;
    });
}

// 使用示例
const imageUrl = 'https://example.com/large-image.jpg';
getImageDimensions(imageUrl)
    .then(dimensions => {
        console.log('图片宽度:', dimensions.width);
        console.log('图片高度:', dimensions.height);
    })
    .catch(error => {
        console.error('加载图片失败:', error);
    });

优势：

可以结合其他HTTP头部信息进行预判断。
更灵活，适用于需要更多图片元数据的场景。

三、应用场景

图片预览：在用户上传或查看图片前，预先获取图片尺寸以优化显示效果。
响应式设计：根据图片尺寸动态调整布局，确保在不同设备上的良好展示。
资源管理：判断图片是否过大，以决定是否需要压缩或分片加载，提升页面性能。

四、常见问题及解决方案

1. 图片加载缓慢或超时

原因：

图片文件过大，网络传输时间长。
网络不稳定导致加载失败。

解决方案：

使用图片压缩工具减小文件大小。
实现懒加载，仅在需要时加载图片。
设置合理的超时机制，避免长时间等待。

2. 跨域问题导致无法获取尺寸

原因：

浏览器的同源策略限制，不允许跨域访问图片的元数据。

解决方案：

确保图片服务器设置了正确的CORS（跨域资源共享）头部，如Access-Control-Allow-Origin。
使用代理服务器转发请求，避免跨域限制。

3. 获取到的尺寸不准确

原因：

图片被缩放或裁剪后，img.width和img.height反映的是显示尺寸而非原始尺寸。

解决方案：

使用naturalWidth和naturalHeight属性获取图片的原始尺寸。

img.onload = function() {
    const width = img.naturalWidth;
    const height = img.naturalHeight;
    console.log('原始宽度:', width);
    console.log('原始高度:', height);
};