カメラを起動し、写真をローカルに表示し、写真をアップロードおよびダウンロードするための WeChat 開発メソッド

この記事では、WeChat開発におけるカメラの設定、写真のローカル表示、写真のアップロードとダウンロードの方法を紹介します

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 メソッドの正常なコールバックでは、選択した写真を表示する必要のある画像の src に割り当てます (ここには写真が 1 つしかないためです。複数の写真がある場合は、この方法でループ割り当てを使用します)。 , 撮ったばかりの写真を直接表示できます

3. 写真をアップロードします

上記のchooseImageの成功コールバックで、uploadToWeixinServerメソッドを呼び出していることがわかります。パラメータはローカル写真のIDです

uploadToWeixinServer: 1

uploadImageインターフェースを呼び出した後、画像はWeChatサーバーにアップロードされ、画像のIDが返されます。このとき、使用する必要があります。 ajax を使用して、それを自分のサーバーに非同期的にアップロードし、WeChat が提供する「一時マテリアルの取得」インターフェイスを呼び出します。もちろん、必ずしも写真を選択した後すぐにアップロードする必要はありません。実際のビジネス ニーズに基づいてアップロードされるものもあれば、フォームが最終的に送信されるときに一緒にアップロードされるものもあります。 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 を使用して主キー ルールを生成し、タイプ + タイムスタンプ + 一意の文字列を通じてイメージ名を定義します。アップロードが成功すると、自分のサーバーの画像アドレスがフロントエンドに返されます。

getInputStream

WeChat が提供する一時マテリアル インターフェイスを呼び出して、WeChat サーバー上にある画像をダウンロードします。パラメータはフロントエンドによって送信されたメディア ファイル 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;  
  
    }

service

は、ループでストリームオブジェクトを解析することによって、ファイルを独自のサーバーに書き込みます

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

以上がカメラを起動し、写真をローカルに表示し、写真をアップロードおよびダウンロードするための WeChat 開発メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。