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

在微信端打开手机摄像头拍照，将拍照图片保存到服务器上需要使用到微信的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);?>