微信公众号 wx.chooseImage拍照或从手机相册中选图接口 ：
1、调用微信接口
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2、通过config接口注入权限验证配置
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [] // 必填，需要使用的JS接口列表 });
3、利用微信公众号的wx.chooseImage
// 选择图片 chooseImage(urlParam, fileCode) { console.log('点击点击'); const that = this; if (typeof window !== 'undefined') { wx.ready(() => { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有 success(req) { // localIds 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 wx.getLocalImgData({ localId: req.localIds[0].toString(), success(res) { const { localData } = res; let imageBase64 = ''; if (localData.indexOf('data:image') == 0) { // 苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接 imageBase64 = localData; } else { // 此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换 // 此时一个正常的base64图片路径就完美生成赋值到img的src中了 imageBase64 = `data:image/jpeg;base64,${localData.replace(/\n/g, '')}`; } // 重新赋值图片 const obj = {}; obj[urlParam] = imageBase64; // 赋值图片 that.setState(obj); that.handleAvatar(that.dataURLtoBlob(imageBase64), fileCode); } }); }, fail() { Toast.show({ type: 'text', text: '选择图片失败！' }); } }); }); } }
4、利用form表单上传图片
// 上传图片 handleAvatar(info, fileCode) { console.log('上传图片的fileCode===', fileCode); const { sessionKey, pictureUrl } = this.props.getImgListData; Toast.loading('Loading...', 30); // 创建FormData const form = info; const formData = new FormData(); // 传递参数 formData.append('file', form, 'test.jpg'); formData.append('channelId', utils.channelId.channelId); formData.append('fileCode', fileCode); formData.append('sessionKey', sessionKey); // ajax请求 const request = new XMLHttpRequest(); request.open('POST', pictureUrl); request.setRequestHeader('Access-Control-Allow-Origin', '*'); request.send(formData); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { const result = JSON.parse(request.responseText); if (result.success === false) { Toast.hide(); Toast.fail(result.resultMsg, 1); } else { Toast.hide(); Toast.success('上传成功', 1); // 重新刷新页面 const data1 = { channelId: utils.channelId.channelId }; this.props.getIdcardPhoto(data1); } } if (request.status !== 200) { Toast.fail(request.resultMsg, 1); } }; }
5、压缩图片
dataURLtoBlob(dataurl) { const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]; const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
全部代码整理
import React, { Component as C } from 'react';
import connect from 'funsee/connect';
import { Button, Toast } from 'antd-mobile';
import * as actions from './action';
import * as style from './style.scss';
import * as utils from '../../../utils/util';
import * as commonAction from '../../../common/action';
class IdCard extends C {
constructor(props) {
super(props);
this.state = {
isShow: false,
frontUrl: '' // 正面
};
}
componentDidMount() {
// 图片上传 获取 微信的 APPID等
const data1 = {
url: 'idCard',
channelId: utils.channelId.channelId
};
this.props.getLocation(data1);
const timer = setInterval(
() => {
if (this.props.getLocationResult && this.props.getLocationResult.success === true) {
clearInterval(timer);
const {
appId, nonceStr, signature, timestamp
} = this.props.getLocationResult && this.props.getLocationResult.value;
// 获取
if (typeof window !== 'undefined') {
window.wx.config({
debug: false,
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature, // 必填，签名
jsApiList: ['chooseImage', 'getLocalImgData']
});
}
}
if (this.props.getLocationResult && this.props.getLocationResult.success === false) {
clearInterval(timer);
Toast.fail(this.props.getLocationResult.errorMsg);
}
}, 100
);
}
// 选择图片
chooseImage(urlParam, fileCode) {
console.log('点击点击');
const that = this;
if (typeof window !== 'undefined') {
wx.ready(() => {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
success(req) {
// localIds 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
wx.getLocalImgData({
localId: req.localIds[0].toString(),
success(res) {
const { localData } = res;
let imageBase64 = '';
if (localData.indexOf('data:image') == 0) {
// 苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
imageBase64 = localData;
} else {
// 此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
// 此时一个正常的base64图片路径就完美生成赋值到img的src中了
imageBase64 = `data:image/jpeg;base64,${localData.replace(/\n/g, '')}`;
}
// 重新赋值图片
const obj = {};
obj[urlParam] = imageBase64;
// 赋值图片
that.setState(obj);
that.handleAvatar(that.dataURLtoBlob(imageBase64), fileCode);
}
});
},
fail() {
Toast.show({
type: 'text',
text: '选择图片失败！'
});
}
});
});
}
}
// 上传图片
handleAvatar(info, fileCode) {
console.log('上传图片的fileCode===', fileCode);
const { sessionKey, pictureUrl } = this.props.getImgListData;
Toast.loading('Loading...', 30);
// 创建FormData
const form = info;
const formData = new FormData();
// 传递参数
formData.append('file', form, 'test.jpg');
formData.append('channelId', utils.channelId.channelId);
formData.append('fileCode', fileCode);
formData.append('sessionKey', sessionKey);
// ajax请求
const request = new XMLHttpRequest();
request.open('POST', pictureUrl);
request.setRequestHeader('Access-Control-Allow-Origin', '*');
request.send(formData);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const result = JSON.parse(request.responseText);
if (result.success === false) {
Toast.hide();
Toast.fail(result.resultMsg, 1);
} else {
Toast.hide();
Toast.success('上传成功', 1);
// 重新刷新页面
const data1 = {
channelId: utils.channelId.channelId
};
this.props.getIdcardPhoto(data1);
}
}
if (request.status !== 200) {
Toast.fail(request.resultMsg, 1);
}
};
}
dataURLtoBlob(dataurl) {
const arr = dataurl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
render() {
const { getImgListData } = this.props;
const { frontUrl } = this.state;
const imgFrontProps = getImgListData && getImgListData.value ? getImgListData.value.filter(item => item.fileCode === 'FC15302410810000000006') : [];
const imgFrontUrl = imgFrontProps.length !== 0 ? imgFrontProps[0].filePath : 'http://biz-oss-public.miaogoche.cn/node-miaogoche/p_miaogouche_shangchuanzheng.png';
// 驾驶证正面-图片
const imgFrontUrlResult = frontUrl || imgFrontUrl;
return (
<div>
<div className={style.title}>请上传您的中国第二代居民身份证原件<br />我们将重视和保护您的隐私</div>
<div>
<div className={style.frontBox} onClick={() => this.chooseImage('frontUrl', 'FC15302410810000000006')} style={{ background: `url(${imgFrontUrlResult}) no-repeat center/contain` }} />
<div className={style.font}>身份证人相面</div>
</div>
</div>
);
}
}
IdCard.pageTitle = '拍摄身份证';
export default connect(state => ({
getImgListData: state.module.realNameAuth_idCard.getIdcardPhoto,
getInfoDataData: state.module.realNameAuth_idCard.getInfoData,
saveIdCard: state.module.realNameAuth_idCard.saveIdCard,
userCertAuthStatusResult: state.common.result,
getLocationResult: state.common.getLocationResult
}), {
getIdcardPhoto: actions.getIdcardPhoto,
saveIdCardData: actions.saveIdCardData,
getInfoData: actions.getInfoData,
userCertAuthStatus: commonAction.userCertAuthStatus,
getLocation: commonAction.getLocation
})(IdCard);
浙公网安备 33010602011771号