后端返回 图片或者文件路径 前端怎么转成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
        }

标签：canvas,img,url,前端,base64,window,let,blob,转成
来源： https://blog.csdn.net/qq_43806488/article/details/123197594