后端返回 图片或者文件路径 前端怎么转成base64

最近碰见一个需求 后端返给图片路径，但是在入参的时候需要转为base64

思索了一天大致分为两种方法

方法一：利用ajax 请求后端返的路径 返回类型变为blob 类型

function getBase64(imgUrl, callback) {
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            // 至关重要
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (this.status == 200) {
                    //得到一个blob对象
                    var blob = this.response;
                    console.log("blob", blob)
                    // 至关重要
                    let oFileReader = new FileReader();
                    oFileReader.onloadend = function (e) {
                        // 此处拿到的已经是 base64的图片了
                        let base64 = e.target.result;
                        callback(base64)
                    };
                    oFileReader.readAsDataURL(blob);
                }
            }
            xhr.send();
        }

利用canvas的dataURL

 function getBase64(url) {
            var url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
            let dataURL = ''
            let img = new Image();
            img.setAttribute("crossOrigin", 'anonymous');
            img.src = url;
            console.log(img);
            img.onload = () => { // 要先确保图片完整获取到，这是个异步处理
                let canvas = document.createElement('canvas'); // 创建canvas元素
                let [width, height] = [img.width, img.height]; // 确保canvas的尺寸和图片一样
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(img, 0, 0, width, height); // 将图片绘制到canvas中
                dataURL = canvas.toDataURL('image/pdf'); // 转换图片为dataURL
                console.log(dataURL);
            }
        }

根据文件获取url信息

 function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL !== undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url
        }

  blobToBase64(blob) {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.onload = (e) => {
                resolve(e.target.result);
            };
            fileReader.readAsDataURL(blob);
            fileReader.onerror = () => {
                reject(new Error("文件流异常"));
            };
        });
    },

   /**
     * base64转 url
     * @params {*} blob 后端返的二进制流
    */
    base64ImgtoUrl(dataurl, filename = 'file') {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const suffix = mime.split('/')[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return global.getObjectURL(new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        }))
    },

 formatDate(format = 'Y-M-D h:m:s', time = null) {
        let date = null;

        if (time) {
            date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        } else {
            date = new Date();
        }
        let formatArr = ['Y', 'M', 'D', "h", "m", "s"];
        let timeObj = {
            Y: date.getFullYear(),
            M: date.getMonth() + 1,
            D: date.getDate(),
            h: date.getHours(),
            m: date.getMinutes(),
            s: date.getSeconds()
        }

        for (const key in timeObj) {
            if (timeObj[key] < 10) {
                timeObj[key] = '0' + timeObj[key];
            }
        }

        for (const keyWord of formatArr) {
            if (format.indexOf(keyWord) !== '-1') {
                format = format.replace(new RegExp(keyWord, 'g'), timeObj[keyWord])
            }
        }
        return format
    },