精华内容
下载资源
问答
  • 主要介绍了微信小程序拍照和摄像功能实现方法,结合实例形式分析了微信小程序拍照与摄影功能的原理、相关实现技巧与注意事项,需要的朋友可以参考下
  • 前面我们讲了微信小程序开发教程前八章,现在更新完结篇:微信小程序拍照收纳开发以及删除名片等。(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信...

      前面我们讲了微信小程序开发教程前八章,现在更新完结篇:微信小程序拍照收纳开发以及删除名片等。(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发,第七章:微信小程序编辑名片页面开发,第八章:微信小程序分组开发与左滑功能实现。)

    第九章:微信小程序拍照收纳开发以及删除名片等

    还是先来看看我们今天的主题——拍照收纳。

    拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍照识别,手动填写和前面的编辑名片是同样的页面,大家可以翻翻之前的教程。

    这个布局很快,wxml 没多少内容。

    拍照收纳的原理是收纳名片功能,步骤是打开微信的拍照 API,同时支持选择本地图片 wx.chooseImage 接口。

    取到图片路径需上传图片文件到后台服务器,这里参照文档打印三个回调。

    但是我发现在开发者工具测试的时候,没有任何打印信息,后台同样也没有接到我上传过去的图片。

    选择一张图片,点击打开后。控制台的 console 没有成功或者失败的回调。

    由于尚处内测版本,暂时还不确定是开发者工具上的 bug 还是 API 接口问题,总之这里影响了小程序开发,我已经写邮件给微信做了反馈。

    如果图片上传成功,后台取到图片会去调一个识别信息操作,最后把识别到的信息传给我们前台进行渲染,最后把信息保存到名片夹里面,收纳名片流程才算走通。

    再补充下名片夹页面的名片删除吧:

    每个名片夹后面都带个删除功能,这个功能是通过左滑出现。

    点击删除,出现是否确定删除弹框(使用自带的模态框组件)。

    确定与取消事件。

    由于这里名片分为,线上收纳与线下收纳。故而多了个 if 判断,走的删除 request 不是一个接口,其他都相差不多。这里最重要的是要获取到 cardId,才能知道被删除的是哪张名片。

    名片的父元素绑定的全部事件,以及需要用到的一些自定义参数。Id 用在左滑上data-card_id 用在页面跳转与删除上,data-card_type 用在判断线上与线下名片。

    cardId 可以在 bindtouchstart 上取到,因为左滑事件是发生 bindtouchstart 事件上。

    当然后面需要用到的值还是先定义个 var 存起来。

    删除完之后还需重新刷新下首页。

    并且提升下用户体验,告诉用户名片删除成功。

    最后一提,当列表很多时,我们需要确定点击到的是那个信息。

    上面的信息都是 block 循环出来的,bindtap 点击事件,然后就是 id=”{{pms.type}}”,重点就是这个 id 来判断被点击的对象。

    操作数据,我们一定要先熟悉好数据的结构,故而在开发前和后台一定要约定好数据结构,熟悉数据结构后,其实开发起来就如庖丁解牛,非常快速(大家开发了小程序后,有没有对 zepoto 与 jQuery 产生反感?哈哈!)

    好了,关于拍照组件的相关内容就写到这里吧!这一章内容就算是博卡君教程的完结篇了。虽然写的内容中包含小程序开发工具的问题,不过我还是推荐大家都尝试调用一下拍照相关功能,看看这些问题在你的机器上会不会出现。按照微信的官方文档,我尝试给 weixin_developer@qq.com 那个邮箱发了邮件报告 bug。没想到很快收到了官方回复,确认了这点。希望尽快得到更新版,一起期待吧?

    原文https://my.oschina.net/wwnick/blog/753597

    转载于:https://www.cnblogs.com/ytkah/articles/5930267.html

    展开全文
  • 微信小程序 拍照打卡功能实现

    千次阅读 2020-05-06 15:41:09
    微信小程序 拍照打卡功能实现小程序端签到页面wxml签到页面js拍照页面wxml拍照页面jsJava后台保存照片保存打卡数据 由于拍照组件是相当于一个块,用隐藏是显示的方法不太好,为了更好的用户交互,选择了在一个新的...

    由于拍照组件是相当于一个块,用隐藏显示的方法不太好,为了更好的用户交互,选择了在一个新的页面调用相机组件,上传图片并保存打卡数据的方式。

    小程序端

    签到页面wxml

    <view class="signBtn" bindtap="signSubmit">
      <view>{{signTime}}</view>
      <view>打卡签到</view>
    </view>
    

    签到页面js

    onLoad: function (options) {
      setInterval(function(){ showTime(_self); }, 1000);
    },
    
    //签到按钮方法
    signSubmit(){
      let _self = this.data;
      let userInfo = this.data.ruleInfo;
      let data = {
        //签到需要保存的数据
      }
      if(this.data.signDisabled){//在打卡距离内
        if(this.data.photoDisabled){//需要拍照人员
          this.toPhoto(data);
          return true;
        }
        wx.request({
          url: getApp().globalData.requestPath + '/sign/saveSignRuleData',
          data: data,
          method:'POST',
          header: {'content-type': 'application/json'},
          success: function (res) {
            if(res.data.success){
              wx.showToast({
                title: '打卡成功',
              })
            }else{
              wx.showToast({
                icon:'none',
                title: res.data.msg,
              })
            }
          }
        })
      }else{
        wx.showToast({
          icon: 'none',
          title: '当前位置不允许打卡',
        })
      }
    },
    
    //跳转到拍照页面方法
    toPhoto(data){
      let signData = JSON.stringify(data);
      wx.navigateTo({
        url: './takePhoto?signData='+signData,	//跳转到自定义的一个拍照页面
      })
    }
    
    //自动获取时间,并实时显示
    function showTime(obj){
      var today,year,month,day,hour,second,minute;
      var strTime;
      var strDate;
      today=new Date();
      var year=today.getFullYear();
      var month=today.getMonth();
      var day=today.getDate();
      hour = today.getHours();
      minute =today.getMinutes();
      second = today.getSeconds();
      strDate = year+"年"+check(month)+"月"+check(day)+"日";
      strTime = check(hour)+":"+check(minute)+":"+check(second);
      obj.setData({
        signTime : strTime
      })
    }
    

    拍照页面wxml

    <view>
      <camera class="camera" device-position='{{devicePosition}}'>
        <cover-view>
          <cover-image wx:if="{{havaPhoto}}" src="{{src}}"></cover-image>
        </cover-view>
      </camera>
      <view hidden="{{havaPhoto}}" style="background-color:black;height:15vh">
        <button bindtap="takePhoto" class="takeButton" style="left:45vw">拍照</button>
        <button bindtap="changeCamera" class="takeButton" style="right:15vw">转换</button>
      </view>
      <view hidden="{{!havaPhoto}}" style="background-color:black;height:15vh">
        <button bindtap="retake" class="takeButton" style="left:15vw">重拍</button>
        <button bindtap="signPhoto" class="takeButton" style="left:45vw">打卡</button>
      </view>
    </view>
    

    拍照页面js

    takePhoto(){//拍照按钮
      let ctx = wx.createCameraContext();
      let _self = this;
      ctx.takePhoto({
        quality: 'high',//high,normal,low
        success: (res) => {
          _self.setData({
            src:res.tempImagePath,
            havaPhoto:true
          })
        }
      })
    },
    retake(){//重新拍摄
      this.setData({
        havaPhoto:false,
        src:''
      })
    },
    changeCamera(){//转换摄像头
      if(this.data.devicePosition=='front'){
        this.setData({
          devicePosition:'back'
        })
      }else{
        this.setData({
          devicePosition:'front'
        })
      }
    },
    signPhoto(){//上传文件,并保存打卡数据
      let _self = this;
      wx.uploadFile({
        url: getApp().globalData.requestPath + '/sign/saveSignPhoto',
        filePath: _self.data.src,
        name: 'filePath',
        formData: {
          'user': _self.data.signData.userId
        },
        success: function (res) {
          let resData = JSON.parse(res.data);
          let data = _self.data.signData;
          data.imagePath = resData.msg;
          if(res.statusCode==200 && resData.success){
            wx.request({
              url: getApp().globalData.requestPath + '/sign/saveSignRuleData',
              data: data,
              method:'POST',
              header: {'content-type': 'application/json'},
              success: function (result) {
                if(result.data.success){
                  wx.showToast({
                    title: '打卡成功',
                  })
                  setTimeout(() => {
                    wx.navigateBack();
                  }, 2000);
                }else{
                  wx.showToast({
                    icon:'none',
                    title: result.data.msg,
                  })
                }
              }
            })
          }else{
            wx.showToast({
              title: resData.msg,
            })
            setTimeout(() => {
              wx.navigateBack();
            }, 2000);
          }
        }
      })
    }
    

    Java后台

    保存照片

    @RequestMapping("/saveSignPhoto")
    @ResponseBody
    public AjaxResult saveSignPhoto(HttpServletRequest request, @RequestParam(value = "filePath", required = false) MultipartFile file) throws IOException {
        String fileName = file.getOriginalFilename();
        String path;
        String type;
        String trueFileName;
        String basePath = "D:/file/";
        String user = request.getParameter("user");
        if(!file.isEmpty()) {
            type = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
            if (type != null) {
                if ("PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) {
                    // 项目在容器中实际发布运行的根路径
    //                    String realPath = request.getSession().getServletContext().getRealPath("/");
                    // 自定义的文件名称
                    trueFileName = System.currentTimeMillis() + "_" +user + "_" + sdf.format(new Date()) + "." +type;
                    // 设置存放图片文件的路径
                    path = basePath + trueFileName;
                    file.transferTo(new File(path));
                }else {
                    return AjaxResult.errorResult("文件类型错误");
                }
            }else {
                return AjaxResult.errorResult("文件类型不存在");
            }
        }else {
            return AjaxResult.errorResult("文件不存在");
        }
        return AjaxResult.successResult(trueFileName);
    }
    

    保存打卡数据

    @RequestMapping("/saveSignRuleData")
    @ResponseBody
    public AjaxResult saveSignRuleData(@RequestBody BgCard bgCard){
        boolean flag = signDataService.saveSignRuleData(bgCard);
        if(flag){
            return AjaxResult.successResult();
        }else {
            return AjaxResult.errorResult("保存失败");
        }
    }
    
    展开全文
  • 微信小程序拍照闪退

    千次阅读 2020-07-31 16:05:04
    下面对微信小程序拍照进行了优化后,经过测试拍照闪退的概率明显少多了,虽然不能保证拍照不闪退,至少目前没有出现了。记录一下方法。 /** * 选择照片 */ takePhoto: function () { var that = this; var ...

    测试最近提出他的小米10pro和部分机型拍照压缩的时候闪退,操作十次闪退的频率最高的时候达到五次。在网上查了很多资料,比如微信版本,微信存储空间等方法都尝试了,然而并没有什么用。下面对微信小程序拍照进行了优化后,经过测试拍照闪退的概率明显少多了,虽然不能保证拍照不闪退,至少目前没有出现了。记录一下方法。

    /**

    * 选择照片

    */

    takePhoto: function () {

    var that = this;

    var app = getApp();

    if (that.data.selectImgs.length < 9) {

    wx.chooseImage({

    count: 9,

    sizeType: ['compressed'], //可以指定是原图还是压缩,默认二者都有

    //可以选择相册照片或者拍照

    // sourceType: ['album', 'camera'],

    sourceType: ['camera'],

    success: function (res) {

    //返回选定照片的文件路径列表,tempFilePaths可以作为img标签的src属性显示图片

    var tempFilePaths = res.tempFilePaths;

    console.log('获取图片成功了=' + tempFilePaths[0]);

    //将照片路径添加到selectImgs中

    that.setData({

    selectImgs: that.data.selectImgs.concat(tempFilePaths)

    });

    },

    });

    } else {

    wx.showToast({

    title: '最多拍9张照片',

    icon: 'none',

    duration: 2000

    })

    }

     

    },

     

     

     

    展开全文
  • 微信小程序拍照识别垃圾分类|垃圾分类查询小程序|拍照识别垃圾分类小程序 微信小程序拍照识别垃圾分类查询小程序|拍照识别垃圾分类小程序 最近全中国人都在讨论一件事情那就是垃圾分类! 从上海开始到全国46个城市...

    微信小程序拍照识别垃圾分类|垃圾分类查询小程序|拍照识别垃圾分类小程序

    微信小程序拍照识别垃圾分类查询小程序|拍照识别垃圾分类小程序
    最近全中国人都在讨论一件事情那就是垃圾分类!
    从上海开始到全国46个城市试点垃圾分类提上日程似乎已经板上钉钉
    垃圾分类会激发多大的市场?哪些相关产业值得关注?
    全产业链均受益,湿垃圾市场增量最大 
    具体来说,可回收物 有害垃圾 易腐垃圾其他垃圾

    但是具体的一个垃圾属于什么垃圾我们还是不清楚,接下来我们就来写一个拍照可以识别垃圾分类的微信小程序

     

    展开全文
  • 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给...
  • 主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序开发之拍照智能评分小程序源码,微信小程序开发之拍照智能评分小程序源码。打包下载。
  • 微信小程序-步步高字典 说明: 实现拍照查字功能,特色: 使用七牛云存储 ES6语法 数据接口: https://api.getweapp.com/engine/qiniu/upload https://api.getweapp.com/engine/faceplusplus/recognizetext ...
  • 在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的。本文知识点:1、微信小程序选择图片wx.chooseImage()...
  • 一个进行文件图片传输的小程序,图片要高清图,所以小程序带有拍照功能,但是小程序拍的图片模糊,像微信相机拍的,有没有哪位知道是什么问题・_・?
  • 微信小程序拍照功能

    千次阅读 2019-04-15 16:12:34
    一开始就想弄个微信的小程序玩玩然后想了想最后就决定了,就弄个微信小程序拍照功能,然后就上网查询了一些资料,在微信社区文档里有很多功能可以使用,然后我就尝试的找了一下关于拍照的资料,然后整理出来文档和...
  • 有没有农残微信小程序拍照后5分钟见分晓!.pdf
  • 微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家...
  • 微信小程序 拍照识汉字 步步高字典源码,类似于以前的“看图汉字”,呵呵,这应该是图像识别的范畴了吧,这个小程序代码我只是在开发工具中看了一眼,不知道具体 功能怎么样。使用方法,哪里不会拍哪里,用相机对准...
  • 微信小程序(有始有终,全部代码)开发--- 新增模块: 图片选取以及拍照功能 现在开学了,我又写了点东西: 微信小程序(有始有终,全部代码)开发--- 新增【录音】以及UI改进 正文 一、UI改进 >本来想要就此封笔,...
  • 微信小程序中实现自定义拍照功能主要使用到如下的组件和API 1:camera组件 常见的属性有: (1):mode 应用模式,只在初始化时有效,不能动态变更,参数有:normal(相机模式),scanCode(扫码模式) ,默认为normal (2)...
  • 有没有农残微信小程序拍照后5分钟见分晓!
  • 本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下(一)、功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片。其他要点:textarea使用,底部...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,391
精华内容 2,956
关键字:

微信小程序拍照功能

微信小程序 订阅