微信调用拍照接口,以及处理数据
1、引入JS
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、根据公众号appid等信息,配置调用环境。
function natoken() {
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: "",
data: {
'url': location.href
},
success: function(res) {
if (res.result != undefined || res.result != false) {
wx.config({
debug: false, // 开启调试模式,调用,仅在 pc 端时才会打印。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: ['chooseImage', 'previewImage', 'uploadImage',
'downloadImage',
'getLocalImgData', 'scanQRCode'
] // 必填,需要使用的 JS 接口列表
});
} else {
layer.msg('后台系统繁忙或者崩溃');
}
},
error: function() {
layer.msg('调取微信扫一扫功能失败');
}
});
}
3、拍照
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds;
wx.getLocalImgData({ // 获取本地图片
localId: localIds[0],
success: function(res) {
let localData = res.localData;
// alert(localData); // 在安卓和IOS中获取到格式稍微有点区别,具体看下图
if (localData.indexOf('data:image') != 0
) { //传给后台的参数是不需要data:image/png;base64,所以去掉了。可以根据具体的业务需求对该格式做变化。
localData = 'data:image/jpeg;base64,' + localData;
}
localData = localData.replace(/\r|\n/g, '').replace(
'data:image/jgp', 'data:image/jpeg')
// alert("base64:"+localData)
var str = '<img src="' + localData + '" alt="">';
$("#result").append(str);//渲染到存放图片的空间
},
});
},
error: function() {
layer.msg(
'<span style="font-size:3rem;line-height:3rem">拍照功能正在开发中!</span>', {
time: 2000
});
}
});
4、提交前处理照片,将照片base64存入map
function uploadPhoto() {
let map = {}; //定义map
let listall = $("#result").children(); //根据id获得图片数量
if (listall.length > 0) {
let zhekey = "pic";
let list = $("#result img:nth-of-type(1)");
for (let i = 0; i < listall.length; i++) {
zhekey = zhekey + i; //pic0,pic1,pic2
let picSrc = list.attr("src");
let img = new Image();
img.src = picSrc;
let base64 = img.src;
map["" + zhekey + ""] = base64;
list = list.next(); //处理下一张图片
zhekey = "pic";
}
} else {
map["pic0"] = "空";
}
return map;
}
5、上传图片
function fxgAddPic(map) {
var picnum = Object.getOwnPropertyNames(map).length;
var tup = new Array();
for (var i = 0; i < picnum; i++) {
tup.push(Object.values(map)[i])
}
$.ajax({ //保存图片
url: '',
type: 'post',
dataType: 'json',
data: {
photos: JSON.stringify(tup),
},
success: function(res) {
},
error: function() {
}
})
}
6、后端接收处理参数:
@RequestParam(value="photos",required=false) List<String> photos
for (int i = 0; i < photos.size(); i=i+2){
String top = photos.get(i);//base64头
String body = photos.get(i + 1);//base6身
if (i == 0){//去掉“[”
top = top.substring(1);
}
if (i+2 == photos.size()){//去掉“]”
body = body.substring(0,body.length()-1);
}
String imgBase64 = top + "," + body;//获取单个图片完整base64;
// 该方式传入会将头和尾分开传递,需分开处理。
}
/**
* 本地图片转换Base64的方法
* @param imgPath
*/
public static String ImageToBase64(String imgName) {
InputStream in = null;
byte[] data = null;
// 读取图片字节数组
try {
in = new FileInputStream(imgName);
data = new byte[in.available()];
in.read(data);
in.close();
} catch (IOException e) {
e.printStackTrace();
}
// 对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
// 返回Base64编码过的字节数组字符串
return encoder.encode(data);
}
微信调用扫码功能
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["barCode", "qrCode", "datamatrix", "pdf417"], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
let wlCode = result.substring(9);
$("#xx").val(wlCode);
}
});