微信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 相关文章推荐
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
js微信分享实现代码
Oct 11 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python中的super用法详解
2015/05/28 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python画图的函数用法以及技巧
2019/06/28 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python中实现输入一个整数的案例
2020/05/03 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
工作失职检讨书范文
2014/01/16 职场文书
2014年国培研修感言
2014/03/09 职场文书
开学典礼主持词
2014/03/19 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
实验室标语
2014/06/21 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
python 爬取天气网卫星图片
2021/06/07 Python