当前位置 主页 > 网站技术 > 代码类 >

    微信JSSDK实现打开摄像头拍照再将相片保存到服务器

    栏目:代码类 时间:2019-11-15 15:06

    在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的JSSDK接口,主要使用到了拍照或从手机相册中选图接口(chooseImage),上传图片接口(uploadImage)

    参考资料:

    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

    https://www.easywechat.com/docs/3.x/material

    一:引入微信js

    <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

    二:通过config接口注入权限验证配置

    wx.config(<?php
      echo Yii::$app->wechat->js->config([
        'chooseImage',
        'uploadImage',
        'downloadImage'
      ])
      ?>
    );
    

    三:微信端拍照接口

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
      }
    });
    

    四:将照片上传到微信服务器接口

     wx.uploadImage({
      localId: localIds, // 需要上传的图片的本地ID,由chooseImage接口获得
      isShowProgressTips: 1, // 默认为1,显示进度提示
      success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
      },
      fail: function() {
        //上传图片到微信服务器失败
        return false;
      }
    });

    五:将微信服务器的图片下载到本地服务器

    前端:

    //url表示php接口地址
    //serverId表示图片的服务器端ID
    $.post(url, {'media_id':serverId}, function(data) {
      if (data.type == 'success') {
        //上传成功
        
      } else {
        //上传失败
        
      }
    });
    

    php(接口)

    public function actionUpload()
    {
      Yii::$app->response->format = Response::FORMAT_JSON;
      $request = Yii::$app->request;
      $mediaId = $request->post('media_id');
      if (empty($mediaId)) {
        return [
          'type' => 'error',
          'message' => '参数错误!'
        ];
      }
      //临时素材
      $temporary = Yii::$app->wechat->material_temporary;
      //创建服务器目录
      $path = 'wechat/' . date('Ymd',time()) . '/';
      $fullPath = Yii::getAlias('@webroot') . '/' . $path;
      if (!is_dir($fullPath)) {
        FileHelper::createDirectory($fullPath);
      }
      //设置图片名称
      $fileName = Yii::$app->getSecurity()->generateRandomString() . '-' . date('His',time());
      //将服务器端的临时素材下载到本地服务器
      $temporary->download($mediaId, $fullPath, $fileName);
      return [
        'type' => 'success',
        'url' => $path . $fileName . '.jpg',
      ];
    }
    

    前端代码整合

    <!--引入微信js-->
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
    <button class="btn">点击</button>
    <img  src="" alt="">
    <?php
    $url = \yii\helpers\Url::to(['/wechat/upload']);
    $wxConfig = Yii::$app->wechat->js->config([
      'chooseImage',
      'uploadImage',
      'downloadImage'
    ]);
    $JS = <<<JS
    //注入权限验证配置
    wx.config(
      {$wxConfig}
    );
    $('.btn').click(function () {
        wx.ready(function(){
          wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
              var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
              uploadImage(localIds.toString())
            }
          });
        })
      });
      /**
       * 上传图片到微信服务器
       */
      function uploadImage(localIds) {
        wx.uploadImage({
          localId: localIds, // 需要上传的图片的本地ID,由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1,显示进度提示
          success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
            downloadImage(serverId.toString());
          },
          fail: function() {
            //上传图片到微信服务器失败
            alert('上传图片到微信服务器失败');
            return false;
          }
        });
      }
      /**
       * 将微信服务端的图片下载到本地服务器
       */
      function downloadImage(serverId) {
        //url表示php接口地址
        //serverId表示图片的服务器端ID
        $.post(url, {'media_id':serverId}, function(data) {
          if (data.type == 'success') {
            //上传成功
            alert(data.url);
          } else {
            //上传失败
            alert(data.message)
          }
        });
      }
    JS;
    $this->registerJs($JS);
    ?>