js中文件、图片二进制和base64的互转

93 阅读 0 评论 62 点赞

我是靠谱客的博主慈祥信封，这篇文章主要介绍js中文件、图片二进制和base64的互转，现在分享给大家，希望可以做个参考。

直接看代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * 网络图像文件转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;
}


/**
*Base64字符串转二进制
*/
function dataURLtoBlob(dataurl) {
    var arr = dataurl.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
    });
}


var img = "图像文件URL地址";
var image = new Image();
image.src = img;
image.onload = function() {
    //这样就获取到了文件的Base64字符串
    var base64 = getBase64Image(image);
    //Base64字符串转二进制
    var file = dataURLtoBlob(base64);
}