小編給大家分享一下微信開發(fā)中如何實(shí)現(xiàn)調(diào)起攝像頭、本地展示圖片、上傳下載圖片功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)吳橋,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

1.配置

頁面引入通過jssdk授權(quán)后，傳入wx對(duì)象，首先配置需要的接口

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

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

將下面的方法放在需要點(diǎn)擊事件的回調(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')
   }
});

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

3.上傳照片

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

uploadToWeixinServer: 1

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

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 {            /** 將圖片保存到本地服務(wù)器 **/
            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;
        }

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

getInputStream

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

/**
     * 根據(jù)文件id下載文件 
     * @param accessToken
     * @param mediaId 
     * @return 文件流對(duì)象     */
    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方式請(qǐng)求  
            http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
            http.setDoOutput(true);  
            http.setDoInput(true);  
            System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 連接超時(shí)30秒  
            System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 讀取超時(shí)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)解析流對(duì)象，將文件寫入自己的服務(wù)器

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ā)中如何實(shí)現(xiàn)調(diào)起攝像頭、本地展示圖片、上傳下載圖片功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：微信開發(fā)中如何實(shí)現(xiàn)調(diào)起攝像頭、本地展示圖片、上傳下載圖片功能
網(wǎng)頁路徑：http://www.chinadenli.net/article28/gshhcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、用戶體驗(yàn)、網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、ChatGPT、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)