微信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 相关文章推荐
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
ES6 Class中实现私有属性的一些方法总结
Jul 08 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
session 的生命周期是多长
2006/10/09 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Python中的字典遍历备忘
2015/01/17 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python文件操作的简单方法总结
2019/11/07 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
个人作风建设心得体会
2014/10/22 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年保洁工作总结
2014/11/24 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python