base64，blob（url）图片格式转换

最新推荐文章于 2025-06-23 15:55:36 发布

原创最新推荐文章于 2025-06-23 15:55:36 发布 · 4.3w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #jquery

html 同时被 3 个专栏收录

10 篇文章

订阅专栏

javaScript

8 篇文章

订阅专栏

jQuery

8 篇文章

订阅专栏

本文介绍了如何在HTML5中进行图片的base64与blob格式转换，包括file转url、base64转blob对象、blob对象转化为blob的url以及blob转base64的过程。通过这些转换，可以实现图片的在线预览和上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<a id="a-upon">
                    <input type="file" id="inputImage" accept="image/gif, image/jpeg, image/png, image/jpg">点击这里上传
                </a>

js代码

$("#inputImage").change(function () {
        var objUrl = $(this)[0].files[0];
        var reader = new FileReader();//新建一个FileReader
        reader.readAsDataURL(objUrl);//读取文件,保存为base64 格式
        reader.onload = function (evt) { //读取完文件之后会回来这里
            imageString = evt.target.result;
            //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
            var windowURL = window.URL || window.webkitURL;
            //createObjectURL创建一个指向该参数对象(图片)的URL
            var dataURL = windowURL.createObjectURL(objUrl);
            $("#showImage").attr("src", dataURL );
        }
    });

从input file中获取到的图爿可以通过

file转url

windowURL.createObjectURL（）将其转化为HTTP url类型的数据

base64转blob对象

返回值为blob对象

function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

blob对象转化为blob的url

利用URL.createObjectURL();返回值为blob的url

blob转base64

function blobToDataURL(blob) {
        var a = new FileReader();
         a.readAsDataURL(blob);//读取文件保存在result中
        a.onload = function (e) {
        var getRes = e.target.result;//读取的结果在result中
        }

    }