最近接到一个微信公众号的开发需求,拍照识别二维码并上传,踩了不少坑。有需要的小伙伴可以看看。还附有各种文件转换的方法,可以马克一下。
欢迎和我一起探讨交流~
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转换为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和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转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 => {}
}
复制代码
tips:这里是deqrcode库