wepy-cropper.scss

.cropper_main_container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 750rpx;
  height: 100vh;
  background: #555;
  overflow: hidden;
}

.cropper_main_container.hidden {
  display: none;
}

.cropper_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

/* button */

.cropper_toolbar {
  position: absolute;
  z-index: 100;
  bottom: 0;
  height: 50px;
  background: black;
  width: 100%;
  line-height: 50px;
  font-size: 15px;
  text-align: center;
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.cropper_toolbar .button_item {
  /* width: 70px; */
  float: left;
  width: 25%;
  height: 50px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* cancel_button */

/* .cancel_button {
    position: absolute;
    left: 0;
    top: 0;
} */

/* original_button */

/* .original_button {
    position: relative;
    margin: 0 auto;
    width: 70px;
    height: 50px;
} */

.original_button .check_container {
  position: relative;
  float: left;
  margin-top: 14px;
  width: 18px;
  height: 18px;
  border: 1px solid white;
}

.original_button.checked {
  background: #26ab28;
}

/* .original_button .check_container .check_border {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #fff;
    overflow: hidden;
}

.original_button .check_container .check_center {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    overflow: hidden;
}

.original_button.checked .check_container .check_center {
    background: #26ab28;
}

.original_button .check_text {
    float: left;
    width: 50px;
} */

/* rotate image */

/* .rotate_button {
    position: absolute;
    left: 50px;
    top: 0;
} */

/* crop_image_button */

.crop_image_button {
  /* position: absolute;
  right: 0;
  top: 0; */
  color: #26ab28;
}

.crop_image_button.disable {
  /* color: #038905;  */
  color: rgba(0, 0, 0, 0);
}

/* canvas */

.cropper_movable_area_container {
  position: absolute;
}

.cropper_canvas_container {
  position: absolute;
  left: 0;
  top: 0;
}

/* opacity:0隐藏，如果想看就设置为1，只能在测试机能看到，真机上canvas层级在最高层 */

.cropper_movable_area_container .move_item {
  z-index: 100;
  /* opacity: 0.7;    */
  opacity: 0;
  background: white;
  border-radius: 50%;
}

.cropper_canvas_container .canvas {
  position: absolute;
  left: 0;
  top: 0;
  /* opacity: 0; */
}

/* 因为display:none在真机上会造成无法截取图片，所以这里是通过移到显示区域外来达到隐藏效果的 */

.original_canvas {
  position: absolute;
  left: 750rpx;
  top: 100vh;
}