Heim > WeChat-Applet > WeChat-Entwicklung > Methoden für die WeChat-Entwicklung zum Aktivieren der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern

Methoden für die WeChat-Entwicklung zum Aktivieren der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern

高洛峰
Freigeben: 2017-03-09 15:33:23
Original
2068 Leute haben es durchsucht

In diesem Artikel werden die Methoden zum Einrichten der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern in der WeChat-Entwicklung vorgestellt

1 Konfiguration

Nachdem die Seite über jssdk eingeführt und autorisiert wurde, Das WX-Objekt wird übergeben. Konfigurieren Sie zunächst die erforderliche Schnittstelle


wx.config({    /* debug: true,  */
    appId: appid, 
    timestamp: timestamp, 
    nonceStr: nonceStr, 
    signature: signature,
    jsApiList: [
         'chooseImage',//拍照或从手机相册中选图接口
         'previewImage',//预览图片接口
         'uploadImage',//上传图片接口
         'downloadImage'//下载图片接口
   ]
 });
Nach dem Login kopieren


2. Aufruf Öffnen Sie die Kamera/das Album

und ändern Sie Folgendes: Die Methode wird in die Rückruffunktion eingefügt, die ein Klickereignis erfordert


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')
   }
});
Nach dem Login kopieren


Zu diesem Zeitpunkt können wir sehen, dass ein solcher Effekt bedeutet, dass die Anpassung erfolgreich ist! Beim erfolgreichen Rückruf der Methode ChooseImage ordne ich das ausgewählte Foto dem SRC des anzuzeigenden Bildes zu (da ich hier nur ein Foto habe. Wenn es mehrere Fotos gibt, verwende einfach eine Schleifenzuweisung). , ich kann das gerade aufgenommene Foto direkt im Album anzeigen

Methoden für die WeChat-Entwicklung zum Aktivieren der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern

3. Laden Sie das Foto hoch

Im Erfolgsrückruf von ChooseImage oben können Sie mich sehen. Die Methode uploadToWeixinServer wird aufgerufen und der Parameter ist die ID des lokalen Fotos


uploadToWeixinServer: 1
Nach dem Login kopieren


Nach dem Aufruf der uploadImage-Schnittstelle wird das Bild auf den WeChat-Server hochgeladen. Zu diesem Zeitpunkt müssen Sie Ajax verwenden, um es asynchron auf Ihren eigenen Server hochzuladen und „Get“ aufzurufen „Temporäres Material“-Schnittstelle, bereitgestellt von WeChat. Natürlich ist es nicht unbedingt notwendig, die Fotos sofort nach der Auswahl hochzuladen. Es muss sich an den tatsächlichen Geschäftsanforderungen orientieren. Einige werden stillschweigend hochgeladen (ohne Fortschrittsaufforderungen), andere werden zusammen hochgeladen, wenn das Formular endgültig übermittelt wird

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
                        
                    }
                }
            });
        },
Nach dem Login kopieren


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;
        }
Nach dem Login kopieren


Hier habe ich eine UUID verwendet, um eine Primärschlüsselregel zu generieren, die den Bildnamen durch Typ + Zeitstempel + eindeutige Zeichenfolge definiert. Wenn der Upload erfolgreich ist, wird die Bildadresse des eigenen Servers an das Frontend zurückgegeben.

getInputStream

Rufen Sie die von WeChat bereitgestellte temporäre Materialschnittstelle auf, um das Bild noch auf den WeChat-Server herunterzuladen. Der Parameter ist die vom Frontend übermittelte Mediendatei-ID. und schließlich die Datei für das Eingabestreamobjekt


/**
     * 根据文件id下载文件 
     * @param accessToken
     * @param mediaId 
     * @return 文件流对象     */
    public InputStream getInputStream(String accessToken, String mediaId) {  
        InputStream is = null;  
        String url = "//m.sbmmt.com/"+ 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;  
  
    }
Nach dem Login kopieren


Service

konvertieren analysiert das Stream-Objekt durch eine Schleife und schreibt Dateien auf Ihren eigenen Server


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");
                }  
            }  
        }  
    }
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonMethoden für die WeChat-Entwicklung zum Aktivieren der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage