thinkphp5获取页面数据图片尺寸大小和文件大小

<img style="width:100%;object-fit: cover;" src="{$images}" alt="" id="myImage">

<img style="width:100%;object-fit: cover;" src="{$images}" alt="" id="myImages">

<div style="margin-left: 20px;margin-top: 20px;" id="zhi"></div>

<div style="margin-left: 20px;margin-top: 20px;"><span id="neicun"></span></div>

<script>
        var image = document.getElementById("myImage"); // 根据id获取图片元素
        var zhi = document.getElementById("zhi"); // 根据id获取图片元素

        zhi.innerHTML+="图片尺寸："+image.offsetWidth+"*"+image.offsetHeight;
</script>

<script>
        function convertBytesToKBMB(bytes) {
            var KB = 1024;
            var MB = KB * 1024;
        
            if (bytes < KB) {
                return bytes + ' bytes';
            } else if (bytes < MB) {
                return (bytes / KB).toFixed(2) + ' KB';
            } else {
                return (bytes / MB).toFixed(2) + ' MB';
            }
        }
        window.onload = function() {
            var neicun=document.getElementById('neicun');
        
            var img = new Image();
            img.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL();
                var size = dataURL.length;
                var sizes = (convertBytesToKBMB(size));
                console.log('Image size:', size, 'bytes');
                console.log(sizes);
                neicun.innerHTML+="文件大小："+sizes;
            };
            img.src = image.src;
           
        };

</script>