本文介紹微信開發之調起相機、本地展示圖片、上傳下載圖片方法
1.配置
頁面引入透過jssdk授權後,傳入wx對象,先配置需要的介面
wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口 'previewImage',//预览图片接口 'uploadImage',//上传图片接口 'downloadImage'//下载图片接口 ] });
2.調起拍照/相簿
將下面的方法放在需要點選事件的回呼函數裡面
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') } });
#
這時我們可以看到這樣的效果,代表調起成功了! chooseImage方法的成功回調裡,我將選取的照片賦值給需要顯示的img的src(因為我這裡只有一張照片,如果有多張用循環賦值即可),這樣一來,就可以直接顯示剛拍照/相簿裡選取的照片了
#3.上傳照片
在上面chooseImage的success回呼裡面,可以看到我呼叫了uploadToWeixinServer方法,參數為本機照片的Id
uploadToWeixinServer: 1
呼叫uploadImage介面後,將圖片上傳到了微信伺服器,返回圖片的ID,這個時候需要用ajax非同步上傳到自己的伺服器裡,呼叫微信提供的「取得臨時素材」介面。當然也不一定是選擇完照片就立即上傳,還得根據實際業務需求出發,也有是靜默上傳(沒有進度提示),也有是在最終提交表單時一起上傳
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(); //文件路径不存在则创建 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產生主鍵規則,透過型別+時間戳+唯一字串定義圖片名稱。如果上傳成功,同時又將自己伺服器的圖片位址回傳給前端。
呼叫微信提供的取得臨時素材介面下載還在微信伺服器上的圖片,參數為前端提交上來的媒體檔案ID,最終將檔案轉化為輸入流對象
/**
* 根据文件id下载文件
* @param accessToken
* @param mediaId
* @return 文件流对象 */
public InputStream getInputStream(String accessToken, String mediaId) {
InputStream is = null;
String url = "http://www.php.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();
// 获取文件转化为byte流
is = http.getInputStream();
} catch (Exception e) {
LOGGER.error("Failed to convert inputStream from weixin server,accessToken:{},mediaId:{}",accessToken,mediaId);
}
return is;
}
#
透過循環解析流對象,將文件寫入自己的伺服器
public void saveImageToDisk(String mediaId, String picName, String picPath) throws Exception { String accessToken = getBaseAccessToken(); InputStream inputStream = getInputStream(accessToken, mediaId); // 循环取出流中的数据 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"); } } } }############# ###
以上是微信開發之調起相機、本地展示圖片、上傳下載圖片方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具