前端_简易预览图片

        function previewImgByUrl(url: string) {
            getBlob(url, (blob) => {
                previewImg(blob);
            })
        }

        function getBlob(url, cb) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.onload = () => {
                if (xhr.status === 200) {
                    cb(xhr.response);
                }
            };
            xhr.send();
        }

        function previewImg(blob) {
            const img = document.createElement('img');
            img.onload = () => {
                window.URL.revokeObjectURL(img.src);
            };
            img.src = window.URL.createObjectURL(blob);
            img.style.maxHeight = '100%';
            img.style.maxWidth = '100%';
            document.getElementById('xxx').appendChild(img);
        }

 简单的将二进制文件流转换为图片展示