本文介紹微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片方法

1.配置

頁面引入通過jssdk授權后，傳入wx對象，首先配置需要的接口

wx.config({????/*?debug:?true,??*/
????appId:?appid,?
????timestamp:?timestamp,?
????nonceStr:?nonceStr,?
????signature:?signature,
????jsApiList:?[
?????????'chooseImage',//拍照或從手機相冊中選圖接口
?????????'previewImage',//預覽圖片接口
?????????'uploadImage',//上傳圖片接口
?????????'downloadImage'//下載圖片接口
?　　]
?});

?

2.調(diào)起拍照/相冊

將下面的方法放在需要點擊事件的回調(diào)函數(shù)里面?

wx.chooseImage({
????count:?1,?
????sizeType:?['compressed'],?
????sourceType:?['album',?'camera'],?
????success:?function?(res)?{
　　　　//var?localIds?=?res.localIds;
????　?$('.driver-card?img').prop('src',res.localIds[0]);
????　?uploadPhoto.uploadToWeixinServer(res.localIds[0],'car')
???}
});

?

這時我們可以看到這樣的效果，代表調(diào)起成功了！chooseImage方法的成功回調(diào)里，我將選中的照片賦值給需要顯示的img的src（因為我這里只有一張照片，如果有多張用循環(huán)賦值即可），這樣一來，就可以直接顯示剛剛拍照/相冊里選中的照片了

?

3.上傳照片

在上面chooseImage的success回調(diào)里面，可以看到我調(diào)用了uploadToWeixinServer方法，參數(shù)為本地照片的Id

uploadToWeixinServer:?1

調(diào)用uploadImage接口后，將圖片上傳到了微信服務器，返回圖片的ID，這個時候需要用ajax異步上傳到自己的服務器里，調(diào)用微信提供的“獲取臨時素材”接口。當然也不一定是選擇完照片就立即上傳，還得根據(jù)實際業(yè)務需求出發(fā)，也有是靜默上傳（沒有進度提示），也有是在最終提交表單時一起上傳

js:

uploadToOwnerServer:?function(serverId,type){
????????????$.ajax({
????????????????data:?{serverId:serverId,type:type},
????????????????type?:?"POST",
????????????????url?:?WX_ROOT?+?"wechat/uploadPhoto",
????????????????success?:?function(json)?{????????????????????if?(json)?{????????????????????????var?data?=?JSON.parse(json.data);????????????????????????if?('car'?==?type)?
????????????????????????????uploadPhoto.options.carImage?=?data.path?+?data.name????????????????????????else
????????????????????????????uploadPhoto.options.idCardImage?=?data.path?+?data.name
????????????????????????
????????????????????}
????????????????}
????????????});
????????},

?

Controller

@RequestMapping(value?=?"/uploadPhoto",?method?=?RequestMethod.POST)????public?@ResponseBody?HttpResult?uploadPhoto(@RequestParam?String?serverId,@RequestParam?String?type)?throws?Exception{
????????LOGGER.info("RestFul?of?uploadPhoto?parameters?serverId:{},type:{}",serverId,type);????????
????????try?{????????????/**?將圖片保存到本地服務器?**/
????????????String?photoName?=?type?+?new?Date().getTime()?+?UUID.randomUUID().toString();????????????
????????????//文件路徑不存在則創(chuàng)建
????????????File?saveFile?=?new?File(PIC_PATH?+?type);????????????if?(!saveFile.mkdir())?saveFile.mkdir();
????????????
????????????wechatService.saveImageToDisk(serverId,?photoName,?PIC_PATH?+?type?+?"/");
????????????LOGGER.info("Download?the?picture?from?weixin?server?pathL:{}",PIC_PATH?+?type?+?"/");
????????????JSONObject?data?=?new?JSONObject();
????????????data.put("name",?type?+?"/"?+?photoName+".jpg");
????????????data.put("path",?PIC_SERVER?+?"/");
????????????
????????????HttpResult?rs?=?new?HttpResult();
????????????rs.setCode(200);
????????????rs.setData(data.toJSONString());
????????????LOGGER.info("Download?the?picture?from?weixin?server?is?successful!serverId:{},photoName:{}",serverId,photoName);
????????????LOGGER.info("HttpResult?data:{}",rs.getData());????????????return?rs;
????????}?catch?(Exception?e)?{
????????????LOGGER.error("Download?the?picture?from?weixin?server?is?error",serverId);????????????return?null;
????????}

這里我使用了一個UUID生成主鍵規(guī)則，通過類型+時間戳+唯一字符串定義圖片名稱。如果上傳成功，同時又將自己服務器的圖片地址返回給前端。

?

getInputStream

調(diào)用微信提供的獲取臨時素材接口下載還在微信服務器上的圖片，參數(shù)為前端提交上來的媒體文件ID，最終將文件轉(zhuǎn)化為輸入流對象

/**
?????*?根據(jù)文件id下載文件?
?????*?@param?accessToken
?????*?@param?mediaId?
?????*?@return?文件流對象?????*/
????public?InputStream?getInputStream(String?accessToken,?String?mediaId)?{??
????????InputStream?is?=?null;??
????????String?url?=?"http://ipnx.cn/"+?accessToken?+?"&media_id="?+?mediaId;??
????????try?{??
????????????URL?urlGet?=?new?URL(url);??
????????????HttpURLConnection?http?=?(HttpURLConnection)?urlGet.openConnection();??
????????????http.setRequestMethod("GET");?//?必須是get方式請求??
????????????http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");??
????????????http.setDoOutput(true);??
????????????http.setDoInput(true);??
????????????System.setProperty("sun.net.client.defaultConnectTimeout",?"30000");//?連接超時30秒??
????????????System.setProperty("sun.net.client.defaultReadTimeout",?"30000");?//?讀取超時30秒??????????????http.connect();??
????????????//?獲取文件轉(zhuǎn)化為byte流??
????????????is?=?http.getInputStream();??
????????}?catch?(Exception?e)?{??
????????????LOGGER.error("Failed?to?convert?inputStream?from?weixin?server,accessToken:{},mediaId:{}",accessToken,mediaId);
????????}??
????????return?is;??
??
????}

?

service

通過循環(huán)解析流對象，將文件寫入自己的服務器

public?void?saveImageToDisk(String?mediaId,?String?picName,?String?picPath)?throws?Exception?{??
????????String?accessToken?=?getBaseAccessToken();
????????InputStream?inputStream?=?getInputStream(accessToken,?mediaId);?
????????
????????//?循環(huán)取出流中的數(shù)據(jù)
????????byte[]?data?=?new?byte[1024];??
????????int?len?=?0;??
????????FileOutputStream?fileOutputStream?=?null;??
????????try?{??
????????????fileOutputStream?=?new?FileOutputStream(picPath+picName+".jpg");??
????????????while?((len?=?inputStream.read(data))?!=?-1)?{??
????????????????fileOutputStream.write(data,?0,?len);??
????????????}??
????????????LOGGER.info("Write?the?fileInputStream?is?successful");
????????}?catch?(IOException?e)?{??
????????????LOGGER.error("Write?the?fileInputStream?is?error");
????????}?finally?{??
????????????if?(inputStream?!=?null)?{??
????????????????try?{??
????????????????????inputStream.close();??
????????????????}?catch?(IOException?e)?{??
????????????????????LOGGER.error("Close?the?fileInputStream?is?error");
????????????????}??
????????????}??
????????????if?(fileOutputStream?!=?null)?{??
????????????????try?{??
????????????????????fileOutputStream.close();??
????????????????}?catch?(IOException?e)?{??
????????????????????LOGGER.error("Close?the?fileOutputStream?is?error");
????????????????}??
????????????}??
????????}??
????}

?

以上是微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片方法的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！