uni-app自定义相机

设计思路：

调用camera相机组件，用cover-view，cover-image标签添加自定义页面布局，拍完照之后将照片画到canvas里面，然后用canvasToTempFilePath方法导出需要的图片。

html部分

<camera device-position="back" flash="off" style='width:100%; height:100vh;'><cover-view class="camera-view"><cover-view class="title">{{title}}</cover-view><cover-image class='bgImage' src='@/static/camarebg.png'> </cover-image><cover-image class='takephoto' src='@/static/btn.png' @tap="takePhoto()"> </cover-image></cover-view></camera><canvas v-show='showImage' canvas-id="canvas" style='width:1000px; height:1500px;'></canvas>

调用uni-app的camera组件全屏化相机，用cover-view，cover-image标签添加自定义页面布局，同时准备一个canvas，用来处理图片，遮罩层和拍照按钮使用图片即可，canvas的大小为什么这么设置下面再讲。

data部分

data() {return {title: '',ctx: null,path: "",image: "",showImage: false}},

在onload时加载相机组件

onLoad() {  this.ctx = uni.createCameraContext();
},

拍照

takePhoto(){this.ctx.takePhoto({quality: 'high',success: (res) => {this.imageChange(res)}});},

图片处理

imageChange(options) {var that = this//原图片信息var _width = options.widthvar _height = options.heightthat.path = options.tempImagePath//需要的图片信息var image_x = parseInt(_width * 0.1);var image_y = parseInt(_height * 0.09);var image_width = parseInt(_width * 0.8);var image_height = parseInt(_height * 0.87);uni.getImageInfo({src: that.path,success: function(res) {that.showImage = true//将原图画到canvas上面that.canvas = uni.createCanvasContext("canvas", that)that.canvas.drawImage(that.path, 0, 0, _width, _height)uni.showLoading({title: '数据处理中...',icon: 'loading',duration: 10000})that.canvas.draw()setTimeout(function() {//导出自己需要的图片uni.canvasToTempFilePath({ canvasId: "canvas",x: image_x, y: image_y, width: image_width, height: image_height, destWidth: image_width, destHeight: image_height, success: function(res) {that.image = res.tempFilePath //处理好的图片uni.hideLoading()//TODO........},fail: function(e) {uni.hideLoading()uni.showToast({title: '出错啦...',icon: 'loading'})}});}, 1000);}})}

拍出来的原始照片大小是根据手机屏幕的分辨率计算的，js获取到的是屏幕大小，本人也试过调用uni.getSystemInfo获取系统信息，里面并没有屏幕的分辨率大小，只有屏幕大小，所以我将canvas画布设置到足够大，使原图片可以完全绘制进去，然后使用百分比将需要的部分摘出来。第一次做自定义相机，若有什么不对的地方，希望各位大佬及时指出。

uni-app自定义相机相关推荐

uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
android使用自定义相机避开部分小米手机app调用系统相机有水印会转向的问题
1.需求我们要求很简单,就是拍照后显示效果要横屏拍的横着显示,竖屏拍着竖屏显示.但是我的手机小米5x等小米型号,存在横竖使用系统相机拍摄都是横屏显示的问题.更惨的是获取旋转角度什么的始终是0,没办法 ...
uni开发微信小程序自定义相机自动检测(人像+身份证)
之前开发过微信小程序自定义相机拍照检测人像和身份证检测.一直期望写篇文章记录一下,趁现在有点时间,总结一下. 需求点: 1.能够自定拍摄人像 2.能够自动拍摄身份证正面照 3.识别身份证并且和人脸照比 ...
IOS 自定义相机, 使用 AVFoundation(附实现部分腾讯水印相机功能 demo)
原文链接:http://www.jianshu.com/p/c64bf543f16a 这是一款使用 AVFoundation 自定义的相机,与系统原生相机有一样的外观但比系统的相机更好.更符合实际的开 ...
android 实现自动拍照,Android自定义相机实现定时拍照功能
这篇博客为大家介绍Android自定义相机,并且实现倒计时拍照功能. 首先自定义拍照会用到SurfaceView控件显示照片的预览区域,以下是布局文件: activity_main.xml andro ...
android 自定义相机源码,Android 自定义相机及分析源码
Android 自定义相机及分析源码使用Android 系统相机的方法: 要想让应用有相机的action,咱们就必须在清单文件中做一些声明,好让系统知道,如下 action的作用就是声明action ...
Android添加拍照功能,Android自定义相机，添加水印
很多app都要求自定义一个相机,类似违章查询拍照,美图相机之类的应用都要求自定义相机,网上的例子大多数我也看过,很多例子是有坑的,存在各种各样的问题,常见的就是问题就是适配性很差,这里我分享一下我做的 ...
Android 自定义相机
概述相机几乎是每个APP都要用到的功能,万一老板让你定制相机方不方?反正我是有点方.关于相机的两天奋斗总结免费送给你. 启动相机的两种方式 1.直接启动系统相机 Intent intent = ne ...
Android自定义相机实现定时拍照
这篇博客为大家介绍Android自定义相机,并且实现倒计时拍照功能. 首先自定义拍照会用到SurfaceView控件显示照片的预览区域,以下是布局文件: activity_main.xml <F ...

uni-app自定义相机

uni-app自定义相机相关推荐

最新文章

热门文章