錯誤程式碼

    <div id="div"></div>
    <script>
        var imgEle = document.createElement('img');
        imgEle.src = "../318bb51754058e0b9d9e8c6455d146f2.jpg";
        imgEle.id = 'img';
        var $div = document.getElementById('div');
        $div.appendChild(imgEle);
        console.log(getComputedStyle(imgEle));//CSSStyleDeclaration
        console.log(getComputedStyle(document.getElementById('img')).width);//0
        console.log(getComputedStyle(imgEle).width);//0
 

如上程式碼所示：通過js程式碼在html中建立了一個img標籤，並給其賦值了圖片地址。但是無法通過getComputedStyle立即獲取圖片的寬高。

給程式碼新增非同步處理

        var imgEle = document.createElement('img');
        imgEle.src = "../318bb51754058e0b9d9e8c6455d146f2.jpg";
        imgEle.id = 'img';
        var $div = document.getElementById('div');
        $div.appendChild(imgEle);
        setTimeout(() => {
            console.log(getComputedStyle(imgEle));
            console.log(getComputedStyle(document.getElementById('img')).width);//1920px
            console.log(getComputedStyle(imgEle).width);//1920px
        },100);
 

即因為新增的img標籤渲染需要時間，無法立即通過訪問文件獲得其屬性。

修改程式碼

    選擇檔案： <input type="file" name="file1" id="file1"><br>
    <input type="button" value="讀取" onclick="show()">
    <div id="result"></div>
    <script>
        function readFile() {
            var p1 = new Promise((resolve, reject) => {
                var reader = new FileReader();
                var file1 = document.getElementById('file1').files[0];

                if (/image\/\w+/.test(file1.type)) {
                    reader.readAsDataURL(file1);
                    reader.onload = event => {
                        resolve(reader.result);
                    }
                } else {
                    reject('該檔案不是圖片檔案');
                }
            });
            return p1;
        }

        function show() {
            readFile().then(
                data => {
                    new Promise((resolve, reject) => {
                        var imgEle = document.createElement('img');
                        imgEle.src = data;
                        imgEle.id = 'newCreateImg';
                        document.getElementById('result').appendChild(imgEle);
                        resolve(imgEle);
                    }).then(
                        data => {
                            console.log(getComputedStyle(data).width);
                            console.log(getComputedStyle(data).height);
                        }
                    )


                },
                reason => {
                    var pEle = document.createElement('p');
                    pEle.innerText = reason;
                    document.getElementById('result').appendChild(pEle);
                }
            )
        }
 

通過promise非同步處理，建立標籤完成後再呼叫resolve傳遞物件獲取屬性。