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

最新推荐文章于 2024-08-27 09:53:00 发布

PGzxc

最新推荐文章于 2024-08-27 09:53:00 发布

阅读量4.2k

点赞数

分类专栏：微信小程序文章标签：微信小程序拍照上传

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/122405623

版权

微信小程序专栏收录该内容

99 篇文章 112 订阅

订阅专栏

一拍照效果

拍照前	拍照后

二业务流程

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

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

3.1 思路一(Canvas)

    //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属性

.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%;

}