JS获取本地上传图片的宽和高

fengyehongWorld

已于 2022-03-01 08:35:12 修改

阅读量2.3k

点赞数

分类专栏： # JS 文章标签： javascript html5 html

于 2021-08-31 13:19:53 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/120015597

版权

HTML JavaScript FileReader API 图片尺寸上传文件

关键词由CSDN通过智能技术生成

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算上传图片的大小</title>
</head>
<body>
    <!-- 文件上传框区域,我们只接受图片类型的文件上传 -->
    <input id="avatar" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" />
    <hr>
    <!-- 上传文件大小展示区域 -->
    <div id="size" />
</body>
<script>
    
    // 获取本地上传文件的宽和高
    document.querySelector("#avatar").addEventListener("change", function({target}) {

        const sizeEle = document.getElementById('size');

        // 获取上传之后的文件对象
        const file = target.files[0];

        // 读取上传之后的文件对象
        const imageReader = new FileReader();
        // 将图片的内存url地址添加到FileReader中
        imageReader.readAsDataURL(file);
        // 当图片完全加载到FileReader对象中后,触发下面的事件
        imageReader.addEventListener("loadend", function(e) {
            // 获取上传到本机内存中的图片的url地址
            const imageSrc = e.target.result;
            // 调用计算图片大小的方法
            calculateImageSize(imageSrc).then(function({width, height}) {
                // 通过ES6的结构赋值来得到图片的宽和高
                sizeEle.innerHTML = `${width} x ${height}`;
            });
        });
    });

    // 根据图片地址获取图片的宽和高
    const calculateImageSize = function(url) {
        return new Promise(function(resolve, reject) {
            const image = document.createElement("img");
            image.addEventListener("load", function(e) {
                resolve({
                    width: e.target.width,
                    height: e.target.height,
                });
            });

            image.addEventListener("error", function() {
                reject();
            });

            // 将图片的url地址添加到图片地址中
            image.src = url;
        });
    }
</script>
</html>