Méthodes de développement de WeChat pour activer la caméra, afficher des images localement, télécharger et télécharger des images

Cet article présente les méthodes de configuration de la caméra, d'affichage des images localement, de téléchargement et de téléchargement d'images dans le développement WeChat

1 Configuration

Une fois la page introduite et autorisée via jssdk, l'objet wx est transmis. Tout d'abord, configurez l'interface requise L'interface

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

2. Appelez montez l'appareil photo/l'album

et modifiez ce qui suit. La méthode est placée dans la fonction de rappel qui nécessite un événement de clic

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

À ce moment-là, nous pouvons voir qu'un tel effet signifie que l'ajustement est réussi ! Lors du rappel réussi de la méthode ChooseImage, j'attribue la photo sélectionnée au src de l'image qui doit être affichée (car je n'ai qu'une seule photo ici. S'il y a plusieurs photos, utilisez simplement une affectation de boucle de cette façon). , je peux afficher directement la photo que je viens de prendre. /La photo sélectionnée dans l'album

3. Téléchargez la photo

Dans le rappel réussi de ChooseImage ci-dessus, vous pouvez me voir. La méthode uploadToWeixinServer est appelée et le paramètre est l'identifiant de la photo locale

uploadToWeixinServer: 1

. Après avoir appelé l'interface uploadImage, l'image est téléchargée sur le serveur WeChat. À ce stade, vous devez utiliser ajax pour la télécharger de manière asynchrone et appeler "Get". matériel temporaire » fournie par WeChat. Bien entendu, il n'est pas nécessairement nécessaire de télécharger les photos immédiatement après les avoir sélectionnées. Cela doit être basé sur les besoins réels de l'entreprise. Certaines sont téléchargées silencieusement (sans invite de progression), et d'autres sont téléchargées ensemble lorsque le formulaire est finalement soumis

.

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

Contrôleur

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

Ici, j'ai utilisé un UUID pour générer une règle de clé primaire, définissant le nom de l'image via une chaîne unique de type timestamp. Si le téléchargement réussit, l'adresse de l'image de son propre serveur sera renvoyée au front-end.

getInputStream

Appelez l'interface matérielle temporaire fournie par WeChat pour télécharger l'image toujours sur le serveur WeChat. Le paramètre est l'ID du fichier multimédia soumis par le front-end, et enfin convertir le fichier Pour l'objet de flux d'entrée

/**
     * 根据文件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

analyse l'objet flux à travers une boucle, écrit des fichiers sur votre propre serveur

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!