JS之 文件、base64、blob、blobUrl之间的相互转化

1.将bloburl转换为file格式

let data = {
　　name: "新年致辞.png",
　　status: "success",
　　uid: 1664334311149,
　　url: "blob:http://localhost:9528/d66ad67a-eef7-4b47-ae8b-5c35edcf2135"
};
function async getblobFile (data) {
　　let file = {};const config = { responseType: 'blob' };
　　const response = await axios.get(data.url, config);
　　file = new window.File([response.data], data.name, { type:'image/png' });
　　return file
 };
const res = getblobFile(data);

2.## 将跨域图片地址转化为base64格式

let params = {
　　name: "新年致辞",
　　status: "success",
　　uid: 1664335051168,
　　url: "https://test.aliyun.live.replay.sgcctop.com/images/20220923/1663926296844014067.jpg", //跨域图片地址
}
const res = await getBase64Img (paramas) 

function getBase64Img (params) {
    return new Promise(function (resolve, reject) {
        if (params && params.url) {
            var image = new Image();
            let dataURL = '';
            image.src = params.url + "?" + Math.random();
            image.crossOrigin = 'anonymous';
            image.onload = function () {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(image, 0, 0, image.width, image.height);
                var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
                dataURL = canvas.toDataURL("image/" + ext);
                if (params.callback) {
                    if (params.data) {
                        [params.callback](dataURL, params.data);
                    } else {
                        [params.callback](dataURL);
                    }
                };
                resolve(dataURL);
            }
        }
    })
}

3.file转base64

function fileToBase64 (file, callback) {
  const fileReader = new FileReader()
  fileReader.readAsDataURL(file)
  fileReader.onload = function () {
    callback(this.result)
  }
}
//调用
fileToBase64(file.raw, (res) => {
    console.log(res) //res为base64
})

4.blob转blobUrl

let imgUrl = window.URL.createObjectURL(blob);
console.log(imgUrl)   //imgUrl为blobUrl

5.base64转file

function base64ToFile(dataurl, filename) { //将base64转换为文件
    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 File([u8arr], filename, {type: mime});
}

base64ToFile(base64,filename) //分别为base64字符串、文件名

6.base64转blob

export function base64ToBlob (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 });
}

let imgBlob = base64ToBlob(blob) // imgBlob为blob格式

7.file转blob

let file = document.querySelector('#file');
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
    let blob = new Blob([reader.result], {type: 'image/png'});
};