在JavaScript中查看图片尺寸,可以通过创建Image
对象,设置其src
属性为图片的URL,然后在图片加载完成后获取其width
和height
属性来实现。
以下是一个示例代码:
function getImageSize(url, callback) {
const img = new Image();
img.src = url;
img.onload = function () {
callback(null, { width: img.width, height: img.height });
};
img.onerror = function () {
callback(new Error('图片加载失败'));
};
}
// 使用示例
const imageUrl = 'your-image-url.jpg';
getImageSize(imageUrl, (err, size) => {
if (err) {
console.error(err);
} else {
console.log('图片宽度:', size.width);
console.log('图片高度:', size.height);
}
});
基础概念:
Image
对象:在JavaScript中用于表示图像的HTML元素,可以通过JavaScript创建并操作。src
属性:指定要加载的图像的URL。onload
事件:当图像成功加载后触发。onerror
事件:当图像加载失败时触发。优势:
应用场景:
可能遇到的问题及解决方法:
onerror
事件中处理错误情况。onload
事件触发后再获取图片的宽度和高度。领取专属 10元无门槛券
手把手带您无忧上云