微信JS-SDK选取手机照片上传并下载保存至自己的服务器

最近项目中遇到需要用到微信照片上传，用微信的 js-sdk 提供的选取照片功能，然后将照片上传至微信服务器，根据返回图片的服务器端ID将图片下载至自己的服务器，来进行项目开发。

发现里边还是有一些坑，贴出来让遇到坑的小伙伴少走弯路。必要准备:

1. 微信JSSDK开发信息配置,就不多说了,前边也有讲,详见: 微信JSSDK开发信息配置

2.JSSDk使用最新的1.2.0版本：https://res.wx.qq.com/open/js/jweixin-1.2.0.js。

具体实现:

1.拍照或从手机相册中选图

使用微信 js-sdk 的 chooseImage 方法:

//1.选择图片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], 	// 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], 		// 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
//var localIds = res.localIds; 		// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
var localId=res.localIds[0];		// 第一张图片
alert(localId);
}

2.获取照片数据并显示图片

这里需要注意，微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核，WKWebview 不支持 localId 直接显示图片，所以需要调用一下getLocalImgData接口来实现，在页面中可通过微信注入的window.__wxjs_is_wkwebview变量判断当前使用的webview内核。

//2.显示图片
if (window.__wxjs_is_wkwebview) {	//判断当前使用的webview内核
//获取本地图片,此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
localData = localData.replace('jgp','jpeg');
document.getElementById('img_media').src=localData;	//img标签显示图片
}
});
}else{
//安卓使用UIWebview,支持 localId 直接显示图片
document.getElementById('img_media').
4000
src=localId;	//img标签显示图片
}

3.照片上传与下载
这里使用微信 js-sdk 的 uploadImage 方法，这里需要注意的是:要将本地localId使用localId.toString()将localId强转成String类型，不然上传会报错。

//3.上传图片
wx.uploadImage({
//localId : localId, // 需要上传的图片的本地ID，由chooseImage接口获得
localId : localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId1 = res.serverId; // 返回图片的服务器端ID(serverId)
alert(serverId1);
//下载图片
wx.downloadImage({
serverId: serverId1, // 需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var localId = res.localId; // 返回图片下载后的本地ID
alert(localId);
}
});
}
});


以上过程合起来就是:
//1.选择图片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
//var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
var localId=res.localIds[0]; // 第一张图片
alert(localId);
//2.显示图片
if (window.__wxjs_is_wkwebview) { //判断当前使用的webview内核
//获取本地图片,此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
localData = localData.replace('jgp','jpeg');
document.getElementById('img_media').src=localData; //img标签显示图片
}
});
}else{
//安卓使用UIWebview,支持 localId 直接显示图片
document.getElementById('img_media').src=localId; //img标签显示图片
}

//3.上传图片
wx.uploadImage({
//localId : localId, // 需要上传的图片的本地ID，由chooseImage接口获得
localId : localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId1 = res.serverId; // 返回图片的服务器端ID(serverId)
alert(serverId1);
//下载图片
wx.downloadImage({
serverId: serverId1, // 需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var localId = res.localId; // 返回图片下载后的本地ID
alert(localId);
}
});
}
});
}
});

上传完毕，根据返回图片的服务器端ID将图片下载至自己的服务器，方法如下:
/**
* 下载保存微信图片素材
* @param [string] $serverid 微信服务器上的素材ID
* @return [string] 返回保存本地之后的图片路径
*/
function saveImg($serverid){
if(empty($serverid)) return false;
$mediaid = $serverid;
$token = getToken();
$curl = 'https://api.weixin.qq.com/cgi-bin/media/get?access_token='.$token.'&media_id='.$mediaid;
$content = request($curl);

if(json_decode($content,true)['errcode']){
return json_decode($content,true)['errmsg'];
}
$filename = $serverid.'.jpg'; //保存的文件名
$dateStr = date('Ymd');
$file_dir = './Upload/image/'.$dateStr.'/'; //保存文件的目录
if (!is_dir($file_dir)){ //创建保存文件的目录
mkdir(iconv("GBK","UTF-8", $file_dir),0777,true);
}

$path = $file_dir.$filename; //文件路径
if(file_exists($path)){
unlink($path); //如果文件已经存在则删除已有的
}

$fp = fopen($path, 'w');
$state = fwrite($fp,$content); //写入数据
fclose($fp);

if(!$state) return false;

return $path;
}