前端图片url转base64

前端的图片转base64主要依靠canvas(画布)这个对象的toDataURL方法。

有关canvas的文档：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

注意一下：这个对象只有在前端环境下才存在,后端node环境下是没有canvas这个对象的，所以本篇博客才要分前后端来讲。

export const imageToBase64 = (img) => {
    var canvas = document.createElement("canvas"); //创建一个canvas对象
    //初始化
    canvas.width = img.width;
    canvas.height = img.height;
    
    //也是初始化，getContext("2d")这个方法表示创建一个2d的画布，详情可以看文档
    var ctx = canvas.getContext("2d");
    
    // 把我们创建的图片传入，画布创建完毕
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    
    //我们要的base64就拿到了
    var dataURL = canvas.toDataURL("image/jpeg" + ext);
    return dataURL;

上面方法的参数是个img，这里创建我们的image对象

export const getImage = (url, cb) => {
    var image = new Image();
    image.src = url; 
    
    // onload事件，image一旦加载完就会触发
    image.onload = function () {
        let base64 = imageToBase64(image); //这里就将我们的图片传入给canvas了
        
        //因为是在onload事件内，所以结果要以回调的形式返回
        cb && typeof cb == 'function' && cb(base64);
    }
}

 注意！上面代码的image的url，得是网络地址，就是http:xxxx格式的，本地地址我试过好多次，不管是绝对路径还是相对路径都不行。url无效的话后面的操作都进行不下去，会报一个图片不存在的错误，或者什么错的不报。

关于为什么本地地址无效的问题我也没搞懂，如果看完这篇博客有知道的同学欢迎留言！

 最后使用 

getImage('你的图片url',(res)=>{
        //res就是最终结果
        console.log(res)
})

后端图片转base64

var http = require('http');

async function imgUrlToBase64(url) {
    let base64Img
    return new Promise(function (resolve, reject) {
        //这里的回调函数中的响应对象res中并不携带响应数据，他是一个http.ClientRequest类的实例。想了解的可以看上面文档的链接
        //我们要获取服务器响应的数据，得要用这个实例监听一个data事件。
        
        //这里的url就是图片网络地址
        let req = http.get(url, function (res) {
            //如果用express开发的话
            var chunks = [];
            var size = 0;
            res.on('data', function (chunk) {
                
                chunks.push(chunk);      //把每一次接收的byts存进去
                size += chunk.length;　　//累加缓冲数据的长度
            });
            res.on('end', function (err) { 
                var data = Buffer.concat(chunks, size); 
                base64Img = data.toString('base64');
                resolve({ success: true, base64Img });
            });
        })
        req.on('error', (e) => {
            resolve({ success: false, errmsg: e.message });
        });
        req.end();
    })
}
module.exports = {
    imgUrlToBase64
}

最后使用。这里再说下为什么要分前后端的问题，因为图片url转成base64后太大了，你要是在前端做有的人家第三方的接口不给你传那么大的数据，所以各位看需求选择吧。

    const base64 =await imgUrlToBase64(imgPath)
    console.log(base64) //最后结果