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

欢迎和我一起探讨交流~

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, // 默认9sizeType: ['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, // 图片的localIDsuccess: 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 => {}
}

复制代码