前端文件和base64格式互转以及canvas合成两张图片

直接上代码

//录音文件转base64
export function fileToBase64(audioFile, callback) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var data = event.target?.result?.split(",");
        // console.log(data);
        // decodedImageData = btoa(data[1]);
        // var data1 = event.target?.result
        callback(data[1]);
    };
    reader.readAsDataURL(audioFile);
}

// base64 转 二进制流(blob)
export function dataURLtoBlob(dataurl, type = "audio/wav") {
    // console.log(dataurl);
    // let str = "data:audio/wav;base64," + dataurl.slice(2)
    // console.log(str);
    let mime = type
    // var arr = str.split(","),
    // mime = arr[0].match(/:(.*?);/),
    // let bstr = atob(arr[1])
    let bstr = atob(dataurl)
    let n = bstr.length
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime,
    });
}

// =====================把base64编码转为文件对象==========================
// 第一个参数dataUrl是一个base64的字符串。第二个参数是文件名可以随意命名
export function base64toFile(dataurl, filename = 'file' + Date.now()) {
    let arr = dataurl.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    // suffix是该文件的后缀
    let suffix = mime.split('/')[1];
    // atob 对经过 base-64 编码的字符串进行解码
    let bstr = atob(arr[1]);
    // n 是解码后的长度
    let n = bstr.length;
    // Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
    let u8arr = new Uint8Array(n);
    // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
    // 第三个参数是 要放到文件中的内容的 MIME 类型
    return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
    });
}

//图片转base64
export function imgToBase64(file, callback) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var data = event.target?.result;
        callback(data);
    };
    reader.readAsDataURL(file);
}

export const base64Tofile = (base64) => {
    //将base64转换为blob
    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 });
    }
    //将blob转换为file
    function blobToFile(theBlob, fileName) {
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
    }

    //调用
    var blob = dataURLtoBlob("data:image/jpg;base64," + base64);
    var file = blobToFile(blob, "1.jpg");
    return file
}

//canvas将两张图片合成一张
export function drawAndShareImage(imgSrc1, imgSrc2, callback) {
    //imgSrc1 背景图片（二维码）链接
    const canvas = document.createElement("canvas");
    const W = 345;
    const H = 190;
    canvas.width = W;
    canvas.height = H;
    const context = canvas.getContext("2d");

    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    const myImage = new Image();
    myImage.src = imgSrc1; //背景图片  你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous';

    myImage.onload = () => {
        context.drawImage(myImage, 0, 0, W, H);
        // 如果想要自由的合成图片，那就需要 重复的进行新建，逐个调整位置
        const myImage2 = new Image();
        myImage2.src = imgSrc2; //你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous';
        const w = 100;
        const h = 100;
        myImage2.onload = () => {
            // 绘制图片 让图片在背景图片的中央
            context.drawImage(myImage2, W / 2 - w / 2, H / 2 - h / 2, 100, 100);
            const base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
            callback(base64)
        }
    }
}