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


Posted in Javascript onNovember 15, 2019

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
js正则表达式的使用详解
Jul 09 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
js实现简单的随机点名器
Sep 17 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 #Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 #Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 #Javascript
create-react-app中添加less支持的实现
Nov 15 #Javascript
taro小程序添加骨架屏的实现代码
Nov 15 #Javascript
详解Angular Karma测试的持续集成实践
Nov 15 #Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 #Javascript
You might like
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php格式化时间戳
2016/12/17 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
女大学生毕业找工作的自我评价
2013/10/03 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
降消项目实施方案
2014/03/30 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
迎国庆横幅标语
2014/10/08 职场文书
受资助学生感谢信
2015/01/21 职场文书
公司庆典主持词
2015/07/04 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
导游词之河北邯郸
2019/09/12 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android