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

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

欢迎和我一起探讨交流~

file文件的拷贝和改名

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

blob格式转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转换为blobfunction 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转换为blobfunction 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和canvas获得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转bloblet blob = new Blob([file], {
   type: mimeType})// Blob转filelet 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 => {}   }复制代码

tips：这里是deqrcode库