当前位置:首页 » 《休闲阅读》 » 正文

前端预览图片的两种方式:转Base64预览或转本地blob的URL预览,并再重新转回去

27 人参与  2024年10月17日 13:20  分类 : 《休闲阅读》  评论

点击全文阅读


?‍? 写在开头
点赞 + 收藏 === 学会???

预览图片

一般情况下,预览图片功能,是后端返回一个图片地址资源(字符串)给前端,如:ashuai.work/static/img/…
前端再把这个值丢到img图片的src属性中去即可

之所以有这个图片地址资源,也是因为之前有上传图片的操作,后端存到文件服务器上,生成一份图片url地址

但是某些情况下,需要前端去临时预览一下图片(是否上传是后续的操作,需要先看一下)

这个时候,我们有两种方案

方式一 转base64预览

方式二 生成blob图片预览路径url

方案一 FileReader的readAsDataURL方法

复制粘贴即演示
代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>    <input type="file" id="fileInput">    <img id="previewImage" src="" alt="Preview Image">    <script>        const fileInput = document.getElementById('fileInput');        const previewImage = document.getElementById('previewImage');        fileInput.addEventListener('change', function () {            const file = fileInput.files[0];            const reader = new FileReader();            reader.onload = function (e) {                const base64String = e.target.result;                previewImage.src = base64String;                console.log('图片读取的Base64的值为--->', base64String);            };            reader.readAsDataURL(file);        });    </script></body></html>

解析:

FileReader 之所以能读出图片的 Base64 的值是因为 readAsDataURL 方法本身就可以将图片的二进制数据转化为 Base64 编码并将编码后的字符串以 Data URL 的形式返回以供使用

就是语言的创造者提前把这个图片转Base64的功能封装成一个方法以供我们调用

方案二 URL.createObjectURL方法

createObjectURL是JS自带的一个函数,它可以将Blob、File等二进制文件转为浏览器可直接显示的URL地址,从而方便进行展示

代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>    <input type="file" id="fileInput">    <img id="previewImage" src="" alt="Preview Image">    <script>        const fileInput = document.getElementById('fileInput');        const previewImage = document.getElementById('previewImage');        fileInput.addEventListener('change', function () {            const file = fileInput.files[0];            let tempUrl = window.URL.createObjectURL(file)            console.log('blob--->', tempUrl); // blob:http://127.0.0.1:5500/84d2e951-33dc-4fea-840a-f3d8f3396766            previewImage.src = tempUrl;        });    </script></body></html>

附加方法 Blob转Base64方法

imageBase64:function(img) {        var toBase64= new Promise(function(resolve, reject){                window.URL = window.URL || window.webkitURL;                var xhr = new XMLHttpRequest();                xhr.open("get", img, true);                // 至关重要                xhr.responseType = "blob";//文件流                xhr.onload = function (res) {                    if (res.currentTarget.status == 200) {                        //得到一个blob对象                        var blob = res.currentTarget.response;                        // 至关重要                        let oFileReader = new FileReader();                        oFileReader.onloadend = function (e) {                            let base64 = e.target.result;//base64                            resolve(base64)                        };                        oFileReader.readAsDataURL(blob);                    }                }                xhr.send();            });            return toBase64;    },

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/173106.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1