拍照获取从手机相册选择图片也是移动端比较常用的一个功能，前面已经通过JS-SDK实现了分享接口，接下来就来通过JS-SDK实现拍照或者从手机相册选择照片的功能。
拍照/手机相册选图接口的实现步骤，跟前面分享的分享功能其实是差不多的，这里唯一的区别是，前面分享接口是进入页面后自动触发的，而本次分享的教程里是通过按钮来触发拍照/手机相册选图功能的。
下面把代码放出来：
视图页面代码：（主要用到的接口：chooseImage）
<!DOCTYPE html>
<html>
<head>
<title>公众号JS-SDK 拍照/手机相册选图</title>
<meta charset="utf-8">
<mate name="viewpoint" content="inital-scale=1.0;width=device-width">
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
<!-- <p>{$title}</p>
<p>{$description}</p>
<p>{$url}</p>
<p><img src="{$thumb}"></p> -->
<script type="text/javascript">
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '{$appid}', // 必填，公众号的唯一标识
timestamp: {$time}, // 必填，生成签名的时间戳
nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
signature: '{$signature}',// 必填，签名
jsApiList: [
'chooseImage',
] // 必填，需要使用的JS接口列表
});
wx.ready(function(){
});
//因为这里 拍照/相册选择图片 功能是通过按钮点击来触发的
//所以 wx.chooseImage 要放在 wx.ready 外面，以便点击按钮时可以触发事件函数
function show(){
//相册
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
}
wx.error(function(res){
});
</script>
<button onclick="show();">选择相册图片</button>
</body>
</html>控制器代码：
public function album()
{
$timestamp = time();
$ticket = $this->getTicket();
$nonceStr = $this->getRCode();
$url = '###'; //当前控制器方法的完整访问路径
$signature = "jsapi_ticket={$ticket}&noncestr={$nonceStr}×tamp={$timestamp}&url={$url}";
$signature = sha1($signature);
$this->assign([
'time' => $timestamp,
'appid' =>$this->appid,
'nonceStr' => $nonceStr,
'signature' => $signature,
'ticket' => $ticket,
]);
return $this->fetch();
}
//获取 js_api_ticket
private function getTicket()
{
if (Session::get('ticket') && Session::get('ticket_expire_time')>time() ) {
return Session::get('ticket');
}else{
$accessToken = $this->_getAccessToken();
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$accessToken}&type=jsapi";
$res = $this->ch($url); //url请求
$ticket = $res['ticket'];
Session::set('ticket',$ticket);
Session::set('ticket_expire_time',time()+7200);
return $ticket;
}
}
//获取 nonceStr 随机字符串
private function getRCode($length = 16)
{
$arr = array_merge(range(0, 9), range('a', 'z'), range('A', 'Z'));
$arrLen = count($arr);
$str = '';
for ($i=0; $i<$length; $i++) {
$str .= $arr[mt_rand(0, ($arrLen-1))];
}
return $str;
}
//url请求
private function ch($url, $type='get', $res='json', $arr='')
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
if ($type == 'post') {
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $arr);
}
$cnt = curl_exec($ch);
if (curl_errno($ch)) {
return;
}
curl_close($ch);
if ($res == 'json') {
return json_decode($cnt, true);
}
return $cnt;
}从上面控制器的代码上来看，可以发现几乎和之前实现分享接口时控制器里的代码一样
下面来看看效果截图（需要用公众号扫码来访问控制器 album 方法：用二维码生成工具生成二维码，然后打开微信扫描）
点击相册选择按钮后成功调出手机相册列表界面：
确定选择图片后的提示：
取消选择图片的提示：
拍照/相册选择图片的接口到这也就实现了，JS-SDK中还有很多其他的接口，大多都可以参照这样的方式来实现。
