人工智能研究中心快递柜—

2021SC@SDUSC

本次在上篇的基础上分析拍照上传是如何获取到签名的。

拍照上传也分为两步，首先进行图片拍照，然后能够对获得的图片进行预览，调节尺寸和清晰度。

首先进行页面初始化数据，tablist就是两步的状态选择，tabcur主要用于状态的转换，snap是摄像头的使用状态，preview表示获取了照片。

ata: {TabList: [{name: '1. 拍照'},{name: '2. 预览上传'}],TabCur: 0,Snap: false,Preview: false,img: '',sourceKey: '',calImg: '',weight:50,imgList: [],},

上传图片到页面时，也需要从图片从临时路径中提取出来，具体的实现方法与上篇所说的上传到后端是一样的，不同的是本次是上传到微信页面中。因此不具体展示代码，详细可参考上篇。

定义判断步骤的方法，使用了一个简化的方法，意思是与if语句相同的，因为将tabcur定义为0或1，所以可以实现tabcur的转换。

NumSteps() {this.setData({TabCur: this.data.TabCur == this.data.TabList.length - 1 ? 0 : this.data.TabCur + 1})},

下面定义的方法也是获取事件的监听调整tabcur的值。

 Navigate(e) {var target = e.currentTarget.dataset.index;if (target < this.data.TabCur){this.setData({TabCur: target})}},

然后是定义照相的方法，首先获取相机实例，然后获取camera实时帧数据，将照片临时路径赋给img，将preview改为true，stop进行拍照结束停止监听。

TakePhoto() {const ctx = wx.createCameraContext()const listener = ctx.onCameraFrame((frame) => {console.log(frame)})ctx.takePhoto({quality: 'high',success: (res) => {console.log(res)this.setData({img: res.tempImagePath,Preview: true})listener.stop({success: (res) => {console.log(res)},fail: (err) => {console.log(err)}})},fail: (err) => {console.log(err)}})},

接下来就是获取图片信息，展示到微信界面中，插件库中的getImageInfo可以获取图片信息但网络图片需先配置download域名才能生效，drawImage可以将图像绘制到画布中，它具有三个版本的写法都可以使用，draw将之前在绘图上下文中的描述画到canvas中，canvasPutImageData将像素数据绘制到画布，canvasToTempFilePath将当前画布指定区域的内容导出生成指定大小的图片。

RemoveBackground(){const ctx = wx.createCanvasContext("myCanvas");var that = this;wx.getImageInfo({ src: this.data.img, success: function (res) { console.log(res)ctx.drawImage(that.data.img, 0, 0, res.width, (res.width / 1080) * 960, 0, 0, 1080, 960);ctx.draw(false, () => {wx.canvasGetImageData({canvasId: "myCanvas",x: 240,y: 221,width: 600,height: 600,success: (res) => {console.log(res)var length = 600 * 300 * 4;var calData = new Uint8ClampedArray(length)var weight = that.data.weight / 50for(var i = 0; i < length; i++){calData[i] = (i % 4 === 3 ? 255 : (255 - (res.data[i + length] - res.data[i])) * 2 - (188 * weight));}wx.canvasPutImageData({canvasId: "myCanvas2",data: calData,x: 0,y: 0,width: 600,height: 300,success: (res) => {console.log(res)wx.canvasToTempFilePath({width: 600,height: 300,canvasId: "myCanvas2",success: function(res) {console.log(res)that.setData({calImg: res.tempFilePath,})}});},fail: res => {console.log(res)},})},fail: res => {console.log(res)},})})} })  }

人工智能研究中心快递柜——代码分析十一相关推荐

人工智能研究中心快递柜——代码分析八
2021SC@SDUSC 本次开始介绍柜子的具体使用功能的实现. 由于关于wxml方面都是使用view标签设置相应参数,进行展示故不做具体分析,主要是对 wx:if的运用,合理使用js中传入的数据参数 ...
人工智能研究中心快递柜——代码分析七
2021SC@SDUSC 目录 index.wxml index.js 本次分析项目中柜子的定位功能的实现. index.wxml 在微信官方开发文档中,提供了map组件,通过对wx.createMa ...
人工智能研究中心快递柜——源码部署及分析综述
2021SC@SDUSC 目录项目简介 1.格子柜 2.审计柜人员分工源码部署项目简介 1.格子柜格子柜项目主要用于物品的存储和中转功能,项目分为微信小程序.安卓柜子端.web后台三个呈现形 ...
2019级软件工程应用与实践-人工智能快递柜（代码分析2）
2021SC@SDUSC 第一篇博客中学习了Android Studio的基本使用方式. 第二篇主要是利用了第一周的部分时间和第二周的全部时间来学习Android开发所需要的语法,通过学习,终于可以看 ...
丰巢快递柜启动超时收费3元封顶；谷歌市值一夜暴涨5000亿；两行代码构成的npm包影响到了数百万项目 | EA周报...
EA周报 2020年4月30日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 热点大事件丰巢快递柜启动超时收费3元封顶,菜鸟驿站表态继续免费保管从深圳市丰巢科技有 ...
centos代码切换图形_CentOS已死；微软将强行升级部分旧版本 Windows 10 用户；黑客远程打开莫斯科近3000个快递柜...
编辑 | 万佳本周架构视点:CentOS 8 落幕,CentOS 已死:微软将强行升级部分旧版本 Windows 10 用户:Travis CI 不再为开源项目提供免费服务:JavaScript 诞 ...
单方面论述题-区间贪心快递柜详解+代码——zzx的博客
题目描述合肥市某区有一条路叫科丁路,科丁路是一条长度为L的笔直的路(可以比拟为x轴),路的两边有分布了N个小区,现在要在这条路上建一些快递柜方便居民收发快递,为了使得收发快递方便,快递公司规定每个小 ...
飞鸽快递系统代码_自动售卖机、视觉+重力柜、自动寻址机、智能寄存柜解决方案及整套源代码...
智能售卖机.自动寻址机.快递柜系统整套源代码及解决方案,产品已成型,可快速部署,且有成功运作案例. 智能售卖机.自动寻址机.快递柜系统系统包括(后台数据管理中心,智能售卖机.自动寻址机.快递柜系统终端 ...
隧道保活超时或协商超时_丰巢快递柜超时收费的法律分析
导读深圳市丰巢科技有限公司(以下简称"丰巢公司")4月末正式宣布快递柜"超时收费"办法:超过12小时之后每12小时收取5毛钱,直至3元封顶.此收费办法一经宣布便 ...
[附源码]JAVA+ssm基于Internet快递柜管理系统（程序+Lw)
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...

人工智能研究中心快递柜——代码分析十一

人工智能研究中心快递柜——代码分析十一相关推荐

最新文章

热门文章