前端各种类型文件的转换

1) file文件的拷贝和改名

// 复制文本域中的file文件并重命名
let myFile = new File([file], "新文件的名字"]);

2) bolb格式转base64格式

function blobToDataURL(blob, callback) {
    let reader = new FileReader();
    reader.onload = function () { 
        callback(reader.result); 
    }
    reader.readAsDataURL(blob);
}

3) base64格式的文件转blob格式

//将base64转换为blob
function dataURLtoBlob(dataURL) {
    let arr = dataURL.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

4) base64格式的文件转file格式

//将base64转换为blob
function dataURLtoFile(dataURL, filename) {
    let arr = dataURL.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], `${filename}.jpg`, { type: mime });
}

5) 通过 ajax 请求图片转base64格式

let url = "当前域的xx图片地址";
let xhr = new XMLHttpRequest();    
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
        let reader = new FileReader();
        reader.readAsDataURL(xhr.response);
        reader.onloadend = function(){
            let base64data = reader.result;
        }
    }
}
xhr.send();

6)通过img和canva获得base64格式的图片

function getImgToBase64(url, callback){
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  let img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/jpg');     callback(dataURL);
    canvas = null;
  };
  img.src = url;
}

7) file转blob格式，blob格式转file

// file转blob
let blob = new Blob([file], {
     type: mimeType})
// Blob转file
let file = new File([blob], name, {
     type: mimeType})