使用 微信JS-SDK 拍照 或者获取 相册 图片并展示
最近有在微信公众号的项目需要使用照相机,所以研究了一下微信的拍照功能,以下是具体流程:
根据微信的开发文档,想要使用微信的jssdk,需要5个步骤:
(1)步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
(2)步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
(3)步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用;
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [] // 必填,需要使用的JS接口列表 });
注意:congfig里面的参数都是必填项,其中 appId 、timestamp 、nonceStr 、signature 是需要和微信交互获取的,在本项目中,是后台与微信交互,所以由后台获取,但需要传当前url地址给后台去签名;
然后,jsApiList是一个数组,里面填入你想要使用的接口,具体有哪些接口可以查看微信文档,选择照片的话需要用到:chooseImage(拍照或从手机相册中选图接口)、getLocalImgData(获取本地图片接口)
(4)步骤四:通过ready接口处理成功验证
config信息验证后会执行ready方法所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
wx.ready(function(){// dosomething });
对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。而我们需要调用相机或者相册属于触发型的操作,所以只需要在用户操作时调用接口即可:
- 拍照或从手机相册中选图接口:
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 } });
这里有个坑,不知道是不是我使用错误造成的,就是文档中说的:‘返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片’,并不能实现,所以需要用到getLocalImgData接口将图片显示给用户看。
- 获取本地图片接口:
wx.getLocalImgData({localId: '', // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据,可以用img标签显示 } });
getLocalImgData 接口只需要传一个参数 localId ,这个参数我们可以通过 chooseImage 接口拿到,然后 getLocalImgData 接口会返回一个 值 localData ,这个值就是图片的base64数据,可以用img标签显示,但需要注意的是,安卓和 IOS 机型得到的 localData 会不一样:IOS 得到的已经是加了base64格式的图片了,所以可以直接在img标签使用;但安卓机型返回的是 localData 是缺少 base64 格式前缀的,所以需要加上 ‘data:image/jpeg/png;base64,’,才可以在img标签使用。
所以最终代码是:
wx.chooseImage({count: 1, // 默认9,这里每次只处理一张照片sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function(res) {var localId = res.localIds[0].toString();//因为我们只取一张,所以只有将数组的第一项转字符串保存起来传给 getLocalImgData 方法即可 wx.getLocalImgData({localId: localId, // 图片的localIDsuccess: function(res) {console.log(res);if(window.isIOS) {console.log('ios');//这里需要注意的是,尽管ios返回的是base64编码的字符串,但前缀还是有点不一样,是:'data:image/jgp/png;base64';//网上很多文章都说要按一下方式替换掉‘jgp’为‘jpeg’,但实际操作发现,不替换也可以正常显示,所以本人就不替换了,直接取值使用//$scope.imgUrl = res.localData.replace('jgp', 'jpeg');//替换‘jgp’为‘jpeg’$scope.imgUrl = res.localData;//赋值显示} else if(window.android) {$scope.imgUrl = 'data:image/jpeg/png;base64,' + res.localData; // localData是图片的base64数据,可以用img标签显示 }}});} });
(5)步骤五:通过error接口处理失败验证
wx.error(function(res){// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
转载:https://blog.csdn.net/weixin_36882413/article/details/80674565
转载于:https://www.cnblogs.com/mengrulsy/articles/9518998.html
使用 微信JS-SDK 拍照 或者获取 相册 图片并展示相关推荐
- Android拍照和获取相册图片
之前遇到各种拍照啊,获取相册图片之类,都是直接去度娘,要么之前的代码复制下,没好好总结过. 再也不要问度娘了,再也不用一堆博客里找啊找了... ---------------------------- ...
- 微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
- 使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景 名词 参考 效果图展示 开发步骤 1:概要步骤 2:上代码 结束: 使用微信js sd ...
- 微信JS SDK开放,前端开发者“鸡冻”了!
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
- 微信-js sdk invalid signature签名错误 问题解决
微信-js sdk invalid signature签名错误 问题解决 参考文章: (1)微信-js sdk invalid signature签名错误 问题解决 (2)https://www.cn ...
- 微信js sdk 分享 失败 有时候好 有时候坏
微信js sdk 分享 失败 有时候好 有时候坏 用了一个www开头的域名 和一个xx.com的域名 两个在解析上有问题. 实践是www.xx.com的比较 稳定 转载于:https://www.c ...
- 实战微信JS SDK开发:贺卡制作与播放(1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
- # iOS 相册图片多选以及类似微信获取相册图片并使用AFN框架上传至服务器
iOS 相册图片多选以及类似微信获取相册图片并使用AFN框架上传至服务器 做APP基本上都是需要从系统的相册当中获取一张或多张图片.那怎么做呢?下面我就带你来实现这个内容,第一次写. 我只是记录一下. ...
- android 图片自动裁剪图片,Android实现拍照、选择相册图片并裁剪功能
通过拍照或相册中获取图片,并进行裁剪操作,然后把图片显示到ImageView上. 当然也可以上传到服务器(项目中绝大部分情况是上传到服务器),参考网上资料及结合项目实际情况, 测试了多款手机暂时没有发 ...
最新文章
- 一个较为详细的ETL系统实现方案
- mysql 对插入超过表字段限制时的处理
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
- linux 多个变量,linux-BASH-使用相同“变量”的多个实例读入...
- 【渝粤教育】电大中专职业健康与安全_1作业 题库
- linux下spi添加设备,Linux Kernl添加spidev的设备节点
- php多人点餐可以看到对方点的菜,千万不要小看你身边那个会点菜的人,因为
- 优考试在线考试系统计算机,使用优考试在线考试系统解决企业员工考核评比
- 自动论文生成器 python_python生成器
- 【数据分析】Python-NumPy模块的使用
- 植物大战僵尸Scratch
- 百旺如何看是否清卡_百旺税控盘会自动清卡吗
- html 给表格添加背景,HTML中新建表格怎么加背景
- 概率论笔记3.1二维随机变量及其函数分布
- 一套政务OA系统,助力高效线上办公
- JKD 下载、安装、配置
- 今年电商圈618活动很安静!
- 巨龙之巢服务器为响应,LOL巨龙之巢新网通大区9月4日开放 龙女皇子潘森免费用...
- 普乐蛙VR大型游乐场设备儿童vr游乐园VR主题公园项目解决方案
- 有效衡量App多渠道推广效果