设计思路:
调用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.width
var _height = options.height
that.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画布设置到足够大,使原图片可以完全绘制进去,然后使用百分比将需要的部分摘出来。第一次做自定义相机,若有什么不对的地方,希望各位大佬及时指出。