微信 js sdk 选择图片的使用

2020-9-25 Jon js库

代码演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信 js sdk 选择图片的使用</title>
  <style>
    .choose {
      width: 100px;
      height: 60px;
      line-height: 60px;
    }
  </style>
</head>
<body>
  <div class="choose" id="choose">选择图片</div>
  <div>
    <img id="imgEle" src="" alt="">
  </div>
  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script>
    $(function(){
      $.ajax({
        type: 'post',
        url: '/js-sign/',
        data: {url: location.href.split('#')[0]},
        dataType: 'json',
        beforeSend: function (xhr) {
          xhr.setRequestHeader('x-csrftoken', 'Your oken');
        },
        success: function(sign) {
          alert(JSON.stringify(sign));
          wx.config({
            beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: sign.appId, // 必填,公众号的唯一标识
            timestamp: sign.timestamp, // 必填,生成签名的时间戳
            nonceStr: sign.nonceStr, // 必填,生成签名的随机串
            signature: sign.signature,// 必填,签名
            jsApiList: ['chooseImage', 'getLocalImgData'] // 必填,需要使用的JS接口列表
          });
        },
        error:function(xhr,state,errorThrown){
          alert('调用jssdk接口失败');
        }
      });
      $('#choose').click(function(){
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          defaultCameraMode: 'front',
          success: function(res) {
            const u = navigator.userAgent;
            const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
            if(isAndroid) {
              alert('isAndroid'+res.localIds[0]);
              $('#imgEle').attr('src', res.localIds[0]);
            }else{
              // 获取base64
              try {
                wx.getLocalImgData({
                  localId: res.localIds[0], // 图片的localID
                  success: function(res2) {
                    alert('ios'+res2.localData);
                    $('#imgEle').attr('src', res2.localData);
                  }
                });
              } catch (error) {
                alert('getLocalImgData ...');
              }
            }
          }
        });
      });
    });
  </script>
</body>
</html>

标签: js

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap