1、file图片文件转base64

/**
* file或blob转base64
* @param {*} blob file或者blob
* @param {*} callback function (data)通过参数获得base64
*/
function blobToBase64(blob, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', ()=> {
        callback(reader.result);
    });
    reader.readAsDataURL(blob);
}

知识点：

1）file是一种特殊的blob

2）reader.readyState属性有三种值，代表三种状态

0，empty表示创建了reader，尚未调用任何读取方法
1，loading表示已调用了读取方法
2，done表示读取完成

3）reader实例包含四种转换方法：

readAsDataURL(blob)：读取blob或file对象内容，得到data:URL格式的字符串(base64编码)
readAsArrayBuffer(blob)：结果包含一个 ArrayBuffer 对象以表示所读取文件的数据
readBinaryString(blob)：结果将包含所读取文件原始二进制格式
readAsText(blob, 'utf-8')：可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

2、base64转file(blob)

base64格式数据如下

data:image/png;base64,iVBORw0KGgoAAAANSU...

/**
 * base64转file    
 * base64格式：data:image/png;base64,iVBORw0KGgoAAAANSU...
 * @param {*} dataURL base64编码数据
 * @param {*} filename 文件名称
 */
function dataURLToFile(dataURL, filename){
    const arr = dataURL.split(','),
        mime = arr[0].match(/:(.*?);/)[1], //mime类型 image/png
        bstr = atob(arr[1]); //base64 解码
        
    let n = bstr.length,
        u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    
    return new File([u8arr], filename, {type: mime});
    //return new Blob([a8arr], {type: mime});
}

知识点：

1）base64字符串编码和解码方法：

btoa()函数能够从二进制数据“字符串”创建一个base-64编码的ASCII字符串
atob()函数能解码通过base-64编码的字符串数据

2）file对象

let file = new File(bits, name[, options]);

bits， ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合
name，文件名称
options，type: DOMString，表示将要放到文件中的内容的 MIME 类型。lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

3、图片URL转base64

/**
 * 图片地址转base64
 * base64格式：data:image/png;base64,iVBORw0KGgoAAAANSU...
 * @param {*} url 图片地址
 * @param {*} callback 回调函数
 */
function imgUrlToBase64(url, callback){
    let img = new Image;
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    img.crossOrigin = 'anonymous';//也需要后端的支持
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        
        ctx.drawImage(img, 0, 0);
        callback(canvas.toDataURL());
    }
    img.src = url;
}

知识点：

1）canvas.toDataURL(type, encoderOptions)

type表示图片格式，默认image/png。
encoderOptions表示图片质量，默认为0.92。在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

canvas.toDataURL("image/jpeg", 0.5);

2）canvas.toBlob()方法，可以将canvas图像转换为文件

 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95);

3）ctx.drawImage方法

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

s表示源图片的位置，d表示在画布上的位置

javascript之file、blob、base64相互转换

1、file图片文件转base64

2、base64转file(blob)

3、图片URL转base64