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

发布时间:2021-06-05 18:08:47 作者:小新
来源:亿速云 阅读:542

这篇文章主要介绍了微信JSSDK怎么实现打开摄像头拍照再将相片保存到服务器功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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

一:引入微信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 id="imgTarget" 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);
?>

根据如上代码就可以实现微信端打开摄像头拍照再将相片保存到服务器功能

感谢你能够认真阅读完这篇文章,希望小编分享的“微信JSSDK怎么实现打开摄像头拍照再将相片保存到服务器功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 微信小程序拍照和摄像功能实现方法示例
  2. python+opencv如何实现打开摄像头,保存视频、拍照功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jssdk 服务器

上一篇:使用node怎么实现事件循环和消息队列

下一篇:怎么在PHP中实现后期静态绑定

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》