本文作者:心月

微信公众号开发——JS-SDK拍照/从手机相册选图接口的实现

心月IT博客 2019-10-06
摘要:拍照获取从手机相册选择图片也是移动端比较常用的一个功能,前面已经通过JS-SDK实现了分享接口,接下来就来通过JS-SDK实现拍照或者从手机相册选择照片的功能。

        拍照获取从手机相册选择图片也是移动端比较常用的一个功能,前面已经通过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}&timestamp={$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中还有很多其他的接口,大多都可以参照这样的方式来实现。

文章版权及转载声明:

作者:心月 本文地址:http://www.xinyueseo.com/other/373.html发布于 2019-10-21
文章转载或复制请以超链接形式并注明出处心月IT博客

分享到:
赞(

发表评论

快捷输入:

    评论列表 (有 0 条评论,人围观)参与讨论