图片URL转Base64，Base64转二进制文件流

最新推荐文章于 2024-09-21 15:42:55 发布

蚂蚁上的大象

最新推荐文章于 2024-09-21 15:42:55 发布

阅读量1.1w

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Jensen_Yao/article/details/83312046

版权

JavaScript 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

本文介绍如何将图片URL转换为Base64编码，以及如何将Base64编码转换回二进制文件流。通过Canvas和toDataURL方法实现图片URL到Base64的转换，使用atob和Uint8Array将Base64转为二进制流。

摘要由CSDN通过智能技术生成

现在的项目中对于图片的处理很多，对于图片的URL转Base64或者Base64转文件流很是不好处理，下面我总结了这两种方法互转的代码，希望对你有所帮助。

图片URL 转Base64

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var imgLink = "你的图片URL";
var tempImage = new Image();
tempImage.crossOrigin = "*";
tempImage.onload = function(){
var base64 = getBase64Image(tempImage);
    console.log(base64);
}
tempImage.src = imgLink;

上面的代码其实对于大家并不是很陌生，最主要的事先有canvas把你所需要的图片画出来，然后利用toDataURL把图片转成Base64，看到这里是不是觉得其实很简单并没有自己想的那么难！

Base64转二进制文件流

function dataURLtoBlob(baseurl) {
    let arr = baseurl.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转成二进制流的方法，这里面split() match() 这两个方法不用说了很简单，其中atob()方法可能有一部分同学会觉得很陌生，其实这就是window提供的一种解码方法：

atob()方法

WindowOrWorkerGlobalScope.atob() 函数对已经使用base-64编码编码的数据字符串进行解码。您可以使用该btoa()方法对可能导致通信问题的数据进行编码和传输，然后将其传输并使用该atob()方法再次解码数据。例如，您可以对控制字符（如 ASCII 值0到 31）进行编码，传输和解码。

想要深入了解的同学可以去度娘一下！下面就是charCodeAt()这方法其实也是很简单下面说一下他的作用以及用法：