微信jssdk拍照转base64上传七牛

最新推荐文章于 2024-06-29 02:54:30 发布

原创最新推荐文章于 2024-06-29 02:54:30 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#七牛 #微信jssdk

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用微信JS-SDK调用特定API版本进行地理位置、图片选择等功能，并实现图片数据转换为Base64编码，最后通过七牛云的API上传处理后的图片数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

API版本:

调用API需要1.2以上,是指的至少1.3及往上版本.

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

wx.config({
            debug: false,
            ****验证信息****
            jsApiList: [
            'checkJsApi',
            'openLocation',
            'chooseImage',
            'getLocalImgData'
            ]
        });
        wx.ready(function(){
            
        });  
        wx.checkJsApi({
          jsApiList: [
            'checkJsApi',
            'openLocation',
            'chooseImage',
            'getLocalImgData'
            ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function(res) {
           
          }
        });

微信拍照及数据转base64方法

function getImage(callback,Classify,btn){

       wx.chooseImage({
                count: 1, 
                sizeType: ['compressed'], 
                sourceType: [ 'camera'], 
                success: function (res) {
                    var localIds_val = res.localIds[0]; 
                    var imgCode="<img id=\"updateImage\" src=\""+localIds_val+"\">";
                    $(btn).parent().parent().children().eq(1).append(imgCode);
                    wx.getLocalImgData({
                         localId: localIds_val.toString(),//图片的本地ID
                         success: function (res) {
                             var localData = res.localData;//base64
                             QNputb64(localData,callback,Classify,btn);
                         }
                     });
                }
            });

}

苹果base64数据

data:image/jgp;base64,/9j/4AAQS**************************ALS0lLQAUtFFAC0tJS0AFLSUtAC0UUUDFoopaACloooAWlpKWgB1FJS0gHUUgpaAHUUlLQA6lptLSAcKWkpaAFpaSloGLS0lLQIdS02loGOpRSUtAC0tJS0hi0tJS0ALS0lLQAtLSUtIBaWkpaAFpaSigB1LSUtAxaWkpaQhaWkpaBi0tJRQAtLSUtAC0tJS0ALS0lFIBaKKKAFooooAWiiigYtFFFIAooooAWiiigApaSloGFFFFIBaKKKACiiigApaSloAKKKKACiiigApaSigBaKKKACiiigD/2Q==

安卓base64数据:

9j/4AAQS**************************ALS0lLQAUtFFAC0tJS0AFLSUtAC0UUUDFoopaACloooAWlpKWgB1FJS0gHUUgpaAHUUlLQA6lptLSAcKWkpaAFpaSloGLS0lLQIdS02loGOpRSUtAC0tJS0hi0tJS0ALS0lLQAtLSUtIBaWkpaAFpaSigB1LSUtAxaWkpaQhaWkpaBi0tJRQAtLSUtAC0tJS0ALS0lFIBaKKKAFooooAWiiigYtFFFIAooooAWiiigApaSloGFFFFIBaKKKACiiigApaSloAKKKKACiiigApaSigBaKKKACiiigD/2Q==

上传七牛操作

function QNputb64(pic,callback,Classify,btn){
            var base64 = pic.replace('data:image/png;base64,', '').replace('data:image/jgp;base64,', '');
            $.ajax({
                url: "@(Url.Action("GetTourOAUpTokenQN", "SysManage"))",
                type: "post",
                dataType: "json",
                success: function (result) {
                    if (result.IsSuccess) {
                        var url = "http://upload.qiniup.com/putb64/-1"; //非华东空间需要根据注意事项 1 修改上传域名
                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange=function(){
                            if (xhr.readyState==4){
                                QNReturn = xhr.responseText;
                                wlog(QNReturn);
                                callback(Classify,btn);
                            }
                        }
                        xhr.open("POST", url, true);
                        xhr.setRequestHeader("Content-Type", "application/octet-stream");
                        xhr.setRequestHeader("Authorization","UpToken "+ result.Data);
                        xhr.send(base64);
                    } else {
                        callback(Classify,btn);
                    }
                }
            }); 
        }