微信小程序开发之——拍照上传

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 拍照效果

拍照前 拍照后

二 业务流程

  1. 拍照前，显示取消和拍照按钮
  2. 拍照后，显示预览画面及重拍、取消、拍照和上传按钮
  3. 点击重拍，预览界面被拍照界面替换
  4. 点击上传，上传拍照预览的图片
  5. 点击取消，返回上一个界面

三 可能遇到的问题(中间拍照按钮绘制)

3.1 思路一(Canvas)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//1-内层实体圆-白色-默认状态显示
var circleInnerCtx = wx.createCanvasContext('circleInnerLayer')

// 绘制图形
circleInnerCtx.arc(50, 50, 30, 0, 2 * Math.PI)
circleInnerCtx.setFillStyle('#EEEEEE')
circleInnerCtx.fill()
circleInnerCtx.draw()

//2-外层圆圈-白色-默认状态显示
var circleOuterCtx = wx.createCanvasContext('circleOuterLayer')

// 绘制图形
circleOuterCtx.arc(50, 50, 40, 0, 2 * Math.PI)
circleOuterCtx.setStrokeStyle('#EEEEEE')
circleOuterCtx.setLineWidth(5)
circleOuterCtx.stroke()
circleOuterCtx.draw()

3.2 通过css属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.huan {
  width: 104rpx;
  height: 104rpx;
  border: 5px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

/*圆环倒计时*/

.yuan {
  width: 80rpx;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 50%;

}

四 参考

  • CSDN下载—photo