产品设计效果图
一开始我是想用canvas做出这样的一个页面的，但是不好操作，效果于UI图相差甚远；
所以直接让ui一张背景图包括文字；再加上一个按钮的图片；
- 那么拍照后怎么截图框内图片呢；
哈哈，其实这里我是只截取了中间三分之一；
另外后台要求以base64方式发送；so，代码如下；
<camera device-position="back" flash="auto">
<cover-image class='bck' src="拍照按钮">
</cover-image>
<cover-image src='背景图' class= 'takephoto' bindtap='takePhoto' style='width:140rpx;height:140rpx; position:absolute; bottom:50rpx; left:50%;margin-left:-70rpx;z-index:99;'> </cover-image>
</camera>
<view style="position:fixed;top:999999999999999999999rpx;">
<canvas canvas-id='attendCanvasId' style="width:{{width}}px; height:{{height}}px;"></canvas>
</view>
takePhoto: function() {
wx.showLoading({
'title': '加载中',
'mask':true
})
const ctx = wx.createCameraContext()
let that = this;
ctx.takePhoto({
quality: 'low',
success: (res) => {
let tempImagePath = res.tempImagePath
let fileLastName = tempImagePath.substring(tempImagePath.lastIndexOf(".") + 1)
const ctx = wx.createCanvasContext('attendCanvasId');
ctx.drawImage(tempImagePath, 0, 0, that.data.width, that.data.height);
ctx.draw();
wx.canvasToTempFilePath({
x: that.data.width / 3, //画布x轴起点
y: 0, //画布y轴起点
width: that.data.width / 3, //画布宽度
height: that.data.height, //画布高度
canvasId: 'attendCanvasId',
success: function(res) {
let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
console.log('base64', base64)
that.setData({
src: fileLastName + '@' + base64
})
that.upload()
}
})
}
})
}
这里分为几步
- 通过调用camera标签里面嵌套cover-image做出设计效果；
- 通过官方api调用拿到图片路径
- 3.因为不能整张发送，这样就太大了；所以需要先转canvas；所以多了个canvas标签哈，再通过drawImage以及canvasToTempFilePath截取中间部分；
- 4.最后转base64发送，设计quality: 'low',以及截取三分之一；iphone6拍照拿到的base64文本大小为300KB，安卓普遍为200KB；
- 有个坑，就是canvas标签外层不加上view的话，二次进入页面会有显示性的bug
