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

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'//下载图片接口
 　　]
 });

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')
   }
});

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

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 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
                        
                    }
                }
            });
        },

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;
        }

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 = "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;  
  
    }

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");
                }  
            }  
        }  
    }

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!