vue-h5项目调用微信的相机相册功能
vue-h5项目调用微信的相机相册功能微信的官网网址为:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html微信公众号使用js-sdk的接口链接以下是我本次调用微信相机获取本地图片的一个项目经验1,在html文件中引入微信的接口<script src="http://res.wx.qq.com/ope
·
vue-h5项目调用微信的相机相册功能
微信的官网网址为:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
微信公众号使用js-sdk的接口链接
以下是我本次调用微信相机获取本地图片的一个项目经验
1,在html文件中引入微信的接口
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2,在utils.js中判断是否是微信客户端接口
//是否是微信客户端 //isWxClient 会返回一个true 和flase 是微信浏览器打开返回true 不是返回false
isWxClient(){
return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1
},
3,获取微信的签名信息等
let param = {url:url}
this.$http.getWxQianInfo(param).then(res =>{
if(res.data.code === 0){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.data.appid, // 必填,公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名,见附录1
jsApiList:['chooseImage','uploadImage','getLocalImgData']
})
}
})
4,调用wx.chooseImage
var self = this;
wx.ready(function () {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType:['camera'], //是相机
success: function (res) {
// console.log("res===chengong=",res)
let localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
if(localIds.length>0){
self.wxUploadPic(localIds);
}
}
});
});
wx.error(function (res) {
console.log("shibai",res)
});
5,以base64将图片上传到本地服务器中的方法,getLocalImgData能够转换成base64
wxUploadPic(localIds){
var self = this
wx.getLocalImgData({
localId: localIds[0].toString(),
success: function (resp) {
const localData = resp.localData;
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, '');
}
//console.log("base64===",imageBase64)
// alert(imageBase64)
if (imageBase64) {
let param = {
base64data: imageBase64,
}
console.log('param',param)
if(self.showImgSize(imageBase64) > 2) {
Toast('请使用小于2MB的图片')
return
} else {
self.resumeMsg.photo = param.base64Data
// console.log("上传图片")
//alert("上传图片")
self.$http.uploadHeadPhoto(param, ([code, res]) => {
// self.$http.uploadHeadPhoto({base64Data: param.base64Data}, ([code, res]) => {
// console.log(code)
console.log('res',res)
// alert("上传中")
if(res.code == 0){
self.getPersonalOne()
}
/*if(code == 200) {
self.getPersonalOne()
}*/
})
}
} else {
Toast("选择图片出了点问题,请稍后再试下吧");
}
}
});
},
以上完成了拍照的功能
其他:getLocalImgData,获取图片的base64数据
wx.getLocalImgData({
localId: '', // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
}
});
拍照或从手机相册中选图接口
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});
预览图片接
更多推荐
已为社区贡献26条内容
所有评论(0)