最近接到一个微信公众好的开发需求，拍照识别二维码并上传，踩了不少坑。有需要的小伙伴可以看看。还附有各种文件转化的方法，可以马克一下。

欢迎和我一起探讨交流~

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 => {}   
}


转微信拍照并识别二维码和前端各种类型文件的转换