首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 《微信公众号开发权威教程》

1、拍照或从手机相册中选图接口

在页面上放置一个按钮

<input type="button" value="选择照片" id="button" />

当客户点击按钮时实现照片选择功能

<script>
wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage']
});
wx.ready(function () {
    $('#button').click(function(){
        wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图
            //多个时localIds为一个数组  
           }
        });
    });
});
wx.error(function(res){alert(res);});
</script>


2、上传图片接口

客户一旦选择了照片就会返回一个本地照片的id,利用这个id即可完成照片上传。

备注:
上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,
此处获得的 serverId 即 media_id,
参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html 
目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,
邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。
<script>
wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage']
});
wx.ready(function () {
    $('#button').click(function(){
        wx.chooseImage({
            count: 3, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                var resUpload = new Array();
                //上传照片
                for(k in localIds){
                    wx.uploadImage({
                        localId: localIds[k], // 需要上传的图片的本地ID,由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1,显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            resUpload[k] = serverId;
                        }
                    });
                }
            }
        });
    });
});
wx.error(function(res){
    alert(res);
});
</script>


3、图片哪里去了?

客户选择图片并上传后图片存储在微信服务器上,时效是3天。我们将在下一个章节中讲解如何去获取和下载这些素材。

书籍目录  (请点击阅读)