关于图片或者文件中的base64,File,blob 三者相互转换

 

首先我们看看base64 ，File 对象，Blob 对象长什么样的，怎么来的

1. base64 ： 可以直接当作链接地址使用

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....

2. File 对象：

File{
    lastModified: 1649490762164
    lastModifiedDate: Sat Apr 09 2022 15:52:42 GMT+0800 (GMT+08:00) {}
    name: "1649490762160-251.png"
    size: 25748
    type: "image/png"
    webkitRelativePath: ""
    [[Prototype]]: File
}

3. Blob 对象

Blob{
    size: 25748
    type: "image/png"
    [[Prototype]]: Blob
}　

除了base64 可以直接当作链接使用，File 对象和Bolb 对象也可以通过转换 成base64 直接使用，或者使用 

window.URL.createObjectURL(File 对象或者Bolb 对象) 直接生成链接 : 类似：blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63

所以：能直接当作链接是使用在这三者关系中有

 

1. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
2. blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63

　　

 

一：base64 转 Blob 对象

 

        //base64 转 Blob对象
        /* base64: data:image/png;base64,iVB....
        /* Blob：{...}
        */
        function base64ToBlob(data) {
            var arr = data.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 });
        }

　　

 

二： base64 转 File 对象

  　　　　/** base64 转 File 对象
        /* @param data base64
        /* @param filename 自定义文件名
        /* @return File 对象
        */
        function base64ToFile(data, filename) {
            var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],

                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
           
            let suffixArr = mime.split("/")
            if (suffixArr.length && !filename) {
                let suffix = suffixArr[suffixArr.length - 1]
                filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
            }

            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
        }

　　

三： File 对象，Blob 对象 转base64

         //blob ,File 对象 转 base64
        function blobFileTobase64(blobFile) {
            let reader = new FileReader()
            reader.readAsDataURL(blobFile);
            return new Promise((resolve, reject) => {
                reader.onload = function () {

                    resolve(this.result)
                }
                reader.onerror = (err) => {
                    reject(err);
                };
            })
        }    

　　

四： blob链接转 base64 :利用canvas.toDataURL的API转化成base64

 

blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63 转为
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....

 

        function urlToBase64(url, type = "image/png") {
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.src = url
                img.onload = function () {
                    let canvas = document.createElement("canvas")
                    canvas.width = this.naturalWidth
                    canvas.height = this.naturalHeight
                    let ctx = canvas.getContext("2d")
                    ctx.drawImage(img, 0, 0)
                    let result = canvas.toDataURL(type || 'image/png')
                    resolve(result)
                }
                img.onerror = function (err) {
                    reject(err)
                }
            })

        }    

　　

　　

 

 

 

五： 压缩图片：接收一个File/Blob 对象,返回的是一个base64

 

  /*
            blobFile:file/blob 对象
            option:{type:"image/jpeg",width:'',height:"",quality:0.92,scale:1}
        */
        function compressImg(blobFile, option = {}) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader()
                reader.onload = function () {
                    let img = new Image()
                    img.src = this.result
                    img.onload = function () {
                        console.log("原图片大小：", this.src.length);//这是base64 ，所以可以指定图片大小
                        let imgSize = this.src.length;
                        let targetSize = 100 * 1024;
                        if (imgSize <= targetSize) {
                            return resolve(this.src)
                        }
                        let canvas = document.createElement("canvas")
                        let ctx = canvas.getContext("2d")
                        //原图尺寸
                        let imgW = this.naturalWidth
                        let imgH = this.naturalHeight

                        //新图比例大小
                        let scale = option.scale || 1;

                        let ratio = imgW / imgH; //宽高比例
                        let targetW = option.width || imgW * scale
                        let targetH = option.height || imgH * scale
                        canvas.width = targetW
                        canvas.height = targetH
                        ctx.drawImage(img, 0, 0, targetW, targetH)
                        let fileType = blobFile.type || option.type || 'image/jpeg'
                        let quality = option.quality || 0.5
                        let result = canvas.toDataURL(fileType, quality)
                        console.log("压缩后：", result.length)
                        resolve(result)
                    }

                }
                reader.onerror = function () {
                    reject(new Error(`${blobFile} must is Blob or File 对象`))
                }
                reader.readAsDataURL(blobFile)

            })

        }

　　

六： Blob对象 与File 对象 相互转换

  利用base64 作中间 : blob=>base64=>File   / File=>base64=>blob