前端各類類型文件的轉換

最近接到一個微信公衆好的開發需求，拍照識別二維碼並上傳，踩了很多坑。有須要的小夥伴能夠看看。還附有各類文件轉化的方法，能夠馬克一下。

歡迎和我一塊兒探討交流~

file文件的拷貝和更名

// 複製文本域中的file文件並重命名
let myFile = new File([file], "新文件的名字"]);
複製代碼複製代碼

bolb格式轉base64格式

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

file格式轉base64格式

function blobToDataURL(file, callback) {
    let reader = new FileReader();
    reader.onload = function () { 
        callback(reader.result); 
    }
    reader.readAsDataURL(file);
}
複製代碼複製代碼

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 });
}
複製代碼複製代碼

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 });
}
複製代碼複製代碼

經過 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();
複製代碼複製代碼

經過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;
}
複製代碼複製代碼

file轉blob格式，blob格式轉file

// file轉blob
let blob = new Blob([file], {type: mimeType})
// Blob轉file
let file = new File([blob], name, {type: mimeType})
複製代碼複製代碼

微信sdk拍照識別二維碼並上傳

// 須要提早調用wx.config初始化，這裏就不展現了，而後調用微信拍照接口
wx.chooseImage({
    count: 1, // 默認9
    sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有'album', 'camera'
    success: res => {
      // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
      var localId = res.localIds[0];
      wxGetLocalImgData(localId);
    },
    fail: res => {},
    cancel: res => {}
});
function wxGetLocalImgData(localId) {
   wx.getLocalImgData({
    localId: localId, // 圖片的localID
    success: res =>  {
      // localData是圖片的base64數據，能夠用img標籤顯示
      // 若是是Android，須要增長base64的前綴
      let localData = res.localData;
      localData = window.__wxjs_is_wkwebview ? localData.replace('jgp', 'jpeg') : 'data:image/jpeg;base64,' + localData;
        // 這裏已經拿到base64的文件了，能夠作你想要的轉換上傳，也能夠在這裏識別二維碼
        // 識別二維碼須要用到一個庫qrcode
        // 改造下，利用es6的模塊方式引入
        qrcode.decode(dataUrl);
        qrcode.callback = (qrUrl) => {
            if (qrUrl === 'error decoding QR Code') {
                console.log('二維碼解析異常，請從新拍照')
            } else {
                console.log(qrUrl)
                // 你的上傳方法
                upload(localData);
            }
        }
    },
    fail: res => {}   
}

複製代碼

轉微信拍照並識別二維碼和前端各類類型文件的轉換