评论

camera 实现扫码拍照蒙版效果

实现vin 扫码拍照,抓取裁剪部分内容图片上传后端

直接上代码

<cu-custom bgColor="bg-gradual-whiteisBack="{{true}}">

  <view slot="backText"></view>

  <view slot="contentstyle="font-weight: bold;">扫描VIN码</view>

</cu-custom>



<camera wx:if="{{isShowCamera}}class="camera-boxdevic-position="widthflash="{{flash}}">

  <cover-view class="page-flexstyle="width:{{info.windowWidth}}px; height:{{info.windowHeight}}px;">

    <cover-view class="page-maskstyle="height:{{topHeight}}px; width:100%">

      <cover-view class="cameraTipsstyle="margin-top: {{topHeight -35 }}px">可以扫描前挡风,行驶证,车辆铭牌车架号</cover-view>

    </cover-view>

    <cover-view class="cameraregionstyle="height:75px;width:100%">

      <cover-view class="page-maskstyle="height:75;width:{{edgewidth}}px"></cover-view>

      <cover-image class="active-imagesrc="../../images/0716073342969601272.png"></cover-image>

      <cover-view class="page-maskstyle="height:75;width:{{edgewidth}}px"></cover-view>

    </cover-view>

    <cover-view class="page-mask cameraBgViewstyle="width:100%;height:{{buttomHeight}}px">


    


      <cover-view

        style="width:100%;height:150px;display: flex;justify-content: center; margin-top:{{buttomHeight-200}}px">

        <cover-view

          style="width:100px;height:150px;display: flex;align-items: center;justify-content: center;flex-direction: column;">

          <cover-image class="takephotostyle="" src='../../images/cameraOK.pngbindtap='takePhotoAction'>

          </cover-image>

          <over-view class="ttext">立即识别</over-view>

        </cover-view>

      </cover-view>



      <cover-view

        style="position: absolute;  width:100px;height:150px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-left:15px; margin-top:{{buttomHeight-200}}px;">

        <cover-image class="cancelphotosrc='{{sdtsrc}}bindtap='actionflashstyle=""></cover-image>

        <over-view class="ttext">{{sgtext}}</over-view>

      </cover-view>


    </cover-view>

  </cover-view>


</camera>

<canvas wx:if='{{isShowImage}}canvas-id="image-canvas"

  style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>


/* pages/camera/camera.wxss */


page {

  width: 100%;

  height: 100%;

  /* background-color: #fff; */

  overflow: hidden;

}



.camera-box {

  width: 100vw;

  height: 100vh;

}


.page-flex {

  /* display: flex; */

}


/*  形成遮罩  */

.page-mask {

  background-color: rgba(0, 0, 0, 0.5);

}

.cameraTips {

  width: 100%;

  text-align: center;

  font-size: 14px;

  color: #FFF;

}



.cameraregion {

  display: flex;

}



.ttext {

  font-size: 28rpx;

  margin-top: 12rpx;

  color:#fff;

  font-weight: bold;

  margin-top: 10px;

  /* z-index: 999; */

}


/* 背景图像view */


.camerabgImage-view {

  height: 100%;

  width: 100%;

  position: absolute;

  z-index: 999;

}




/* 提示文本2 */

.cameraTips2 {

  margin-top: 22%;

  text-align: center;

  color: #fff;

}


.cameraactive {

  margin-top: 12px;

  position: absolute;

  width: 100%;

  display: flex;

  justify-content: center;

}


.active-image {

  display: block;

  width: 350px;

  height: 75px;

}


/* 拍照背景view */

.cameraBgView {

  position: relative;

  

  display: flex;

}


/* 按钮view*/

.cameraButton-view {

  height: 200rpx;

  width: 100%;

  position: absolute;

  display: flex;

  justify-content: space-around;

}


/* 取消按钮 */


.cancelphoto {

  width: 100rpx;

  height: 100rpx;

}


/* 拍照按钮 */


.takephoto {

  border-radius: 999px;

  box-shadow: 0 0 50rpx #ffd8a2;

  width: 152rpx;

  height: 152rpx;

}

核心就是

/*  形成遮罩  */

.page-mask {

  background-color: rgba(0, 0, 0, 0.5);

}

形成遮罩 cover-view 标签


计算 canvas 的裁剪部分

最后一次编辑于  2021-02-27  
点赞 0
收藏
评论

4 个评论

  • 不走寻常路
    不走寻常路
    2021-06-15

    发现两个问题,

    1、小米手机有一条线如下图

    2、苹果手机蒙版大概率不显示,十次进入有一两次会显示!!!

    2021-06-15
    赞同
    回复
  • keyiyikao
    keyiyikao
    2021-05-19

    然后呢哥哥?怎么取出想要的区域啊,canvas怎么裁减

    2021-05-19
    赞同
    回复
  • 一π狐言
    一π狐言
    2021-04-09

    兄弟厉害

    2021-04-09
    赞同
    回复
  • 森林好儿狼
    森林好儿狼
    2021-04-01

    请问这样的功能能审核通过吗?

    2021-04-01
    赞同
    回复
登录 后发表内容