1. 背景

本篇来实现下图像相关的接口，包括拍照、预览、上传、下载图片接口。

2. 代码编写

<html>
<head>
<meta charset="utf-8">
<style>
* {font-size: 1.5em;
}
</style>
</head>
<body><input type="button" value="拍照" onclick="imageTest('chooseImage')"> |<input type="button" value="预览" onclick="imageTest('previewImage')"> |<input type="button" value="上传" onclick="imageTest('uploadImage')"> |<input type="button" value="下载" onclick="imageTest('downloadImage')"> |<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script>var apiList = [ 'checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage' ];$(function() {// 向后端请求配置信息$.ajax({type : "GET",url : "/wx-server/wxJsapiSignature",data : {url : location.href.split('#')[0]},dataType : "json",success : function(res) {configInfo(res);}});});// 通过wx.config注入配置信息function configInfo(res) {wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId : res.appId, // 必填，公众号的唯一标识timestamp : res.timestamp, // 必填，生成签名的时间戳nonceStr : res.nonceStr, // 必填，生成签名的随机串signature : res.signature,// 必填，签名jsApiList : apiList// 必填，需要使用的JS接口列表});// 处理成功后回调wx.ready(function() {console.log("处理成功:");wx.checkJsApi({jsApiList : apiList,success : function(checkRes) {console.log("checkRes:", checkRes);}});});// 处理失败后回调wx.error(function(err) {console.log("处理失败:", err);});}var localIds = [];//  图像接口function imageTest(type) {if (type == 'chooseImage') {//拍照接口wx.chooseImage({count : 1, // 默认9sizeType : [ 'original', 'compressed' ], // 可以指定是原图还是压缩图，默认二者都有sourceType : [ 'album', 'camera' ], // 可以指定来源是相册还是相机，默认二者都有success : function(res) {localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片}});}}</script>
</body>
</html>

3. 调试

上面的代码示例，实现了拍照接口，我们点击拍照测试如下：

4. 小结

其他接口参照官方文档实现即可。

微信网页开发(6)--图像接口相关推荐

微信网页开发(8)--地理位置接口
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. 背景 2. 代码 3. 测试 1. 背景微信网页提供了获取当前地理位置经纬度,以及通过内置地图查看当前 ...
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
H5微信网页开发总结（授权，分享，地图）
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权分享地图参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...
微信网页开发分享功能剖析
微信网页开发分享功能剖析步骤一:绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
微信网页开发--仿美团、饿了么红包分享
需求这个月,公司做了一个3.8女王节的活动.当时的需求是一个水果接龙的小游戏.比如,我发起了一条接龙,然后我把这个链接分享出去,A点击这个链接就可以看见我输入的水果,然后A再分享这个链接给B,B就可 ...
微信网页开发-长按二维码无法识别问题解决
微信网页开发-长按二维码无法识别问题解决参考文章: (1)微信网页开发-长按二维码无法识别问题解决 (2)https://www.cnblogs.com/Tylerrrkd/p/9153949.ht ...

微信网页开发(6)--图像接口

本文目录

1. 背景

2. 代码编写

3. 调试

4. 小结

微信网页开发(6)--图像接口相关推荐

最新文章

热门文章