wxmini/pages/components/imageCrop/index.wxss

/* pages/cropper/cropper.wxss */
Page {
  /* 点的颜色 */
  --primary-color: rgb(255, 255, 255);
  /* 边框颜色 */
  --primary-color-outline: rgba(255, 255, 255, 0.75);
  /* 虚线颜色 */
  --primary-color-dashed: rgba(255, 255, 255, 0.46);
  /* 裁剪区域背景色 */
  --box-bg: transparent;
  /* 裁剪所有的背景色 */
  --cropper-bg: #000;
}
.wx-content-info {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cropper-bg);
}
.wx-content-info .cropper-content {
  min-height: calc(20%);
  width: 720rpx;
  margin: 0 auto;
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  bottom: 88rpx;
}
.wx-content-info .cropper-content .wx-corpper {
  position: relative;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content {
  position: relative;
  /* 内部的信息 */
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-content-bg {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  image-orientation: 0deg !important;
  margin: 0 auto;
  position: relative;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-content-bg .mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--box-bg);
  z-index: 2;
  outline: 2500rpx solid rgba(0, 0, 0, 0.7);
}

.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  outline: 1px solid var(--primary-color-outline);
  /* 横向虚线 */
  /* 纵向虚线 */
  /* 四个方向的线  为了之后的拖动事件*/
  /* 右下 */
  /* 右上 */
  /* 左下 */
  /* 左上 */
}

.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-cropper-view-box-img {
  position: absolute;
  overflow: hidden;
}


.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-dashed-h {
  position: absolute;
  top: 33.33333333%;
  left: 0;
  width: 100%;
  height: 33.33333333%;
  border-top: 1px dashed var(--primary-color-dashed);
  border-bottom: 1px dashed var(--primary-color-dashed);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-dashed-v {
  position: absolute;
  left: 33.33333333%;
  top: 0;
  width: 33.33333333%;
  height: 100%;
  border-left: 1px dashed var(--primary-color-dashed);
  border-right: 1px dashed var(--primary-color-dashed);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-t {
  position: absolute;
  display: block;
  width: 100%;
  background-color: var(--primary-color);
  top: 0;
  left: 0;
  height: 1px;
  opacity: 0.1;
  cursor: n-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-t::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0rpx;
  width: 100%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  bottom: 0;
  height: 41rpx;
  background: transparent;
  z-index: 11;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-r {
  position: absolute;
  display: block;
  background-color: var(--primary-color);
  top: 0;
  right: 0px;
  width: 1px;
  opacity: 0.1;
  height: 100%;
  cursor: e-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-r::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 41rpx;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  bottom: 0;
  height: 100%;
  background: transparent;
  z-index: 11;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-b {
  position: absolute;
  display: block;
  width: 100%;
  background-color: var(--primary-color);
  bottom: 0;
  left: 0;
  height: 1px;
  opacity: 0.1;
  cursor: s-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-b::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0rpx;
  width: 100%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  bottom: 0;
  height: 41rpx;
  background: transparent;
  z-index: 11;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-l {
  position: absolute;
  display: block;
  background-color: var(--primary-color);
  top: 0;
  left: 0;
  width: 1px;
  opacity: 0.1;
  height: 100%;
  cursor: w-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-line-l::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 41rpx;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  bottom: 0;
  height: 100%;
  background: transparent;
  z-index: 11;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .wx-cropper-point {
  width: 5px;
  height: 5px;
  /* background-color: var(--primary-color); */
  opacity: .75;
  position: absolute;
  z-index: 3;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-t {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-r {
  top: 50%;
  left: 100%;
  margin-left: -3px;
  margin-top: -3px;
  cursor: n-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt {
  cursor: n-resize;
  width: 29rpx;
  height: 29rpx;
  position: absolute;
  z-index: 1112;
  opacity: 1;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb {
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(50%, 50%, 0);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr {
  right: 0;
  top: 0;
  -webkit-transform: translate3d(50%, -50%, 0);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl {
  left: 0;
  bottom: 0;
  -webkit-transform: translate3d(-50%, 50%, 0);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt {
  top: 0;
  left: 0;
  -webkit-transform: translate3d(-50%, -50%, 0);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::before,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::after,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::before,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::after,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl::before,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl::after,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt::before,
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt::after {
  content: '';
  position: absolute;
  background-color: var(--primary-color);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::before {
  width: 6rpx;
  height: 30rpx;
  right: calc(44%);
  bottom: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-rb::after {
  height: 6rpx;
  width: 30rpx;
  right: calc(44%);
  bottom: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::before {
  width: 6rpx;
  height: 30rpx;
  right: calc(44%);
  top: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-tr::after {
  height: 6rpx;
  width: 30rpx;
  right: calc(44%);
  top: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl::before {
  width: 6rpx;
  height: 30rpx;
  left: calc(44%);
  bottom: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-bl::after {
  height: 6rpx;
  width: 30rpx;
  left: calc(44%);
  bottom: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt::before {
  width: 6rpx;
  height: 30rpx;
  left: calc(44%);
  top: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-lt::after {
  height: 6rpx;
  width: 30rpx;
  left: calc(44%);
  top: calc(44%);
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-b {
  left: 50%;
  top: 100%;
  margin-left: -3px;
  margin-top: -3px;
  cursor: n-resize;
}
.wx-content-info .cropper-content .wx-corpper .wx-corpper-content .wx-corpper-crop-box .wx-cropper-view-box .point-l {
  left: 0%;
  top: 50%;
  margin-left: -3px;
  margin-top: -3px;
  cursor: n-resize;
}
.wx-content-info .cropper-config {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wx-content-info .cropper-config .cropper-cancle,
.wx-content-info .cropper-config .cropper-save {
  color: #fff;
  font-size: 26rpx;
  padding: 15rpx 25px;
  display: block;
}
/* 裁剪框预览内容 */
.wx-cropper-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wx-cropper-viewer image {
  position: absolute;
  z-index: 2;
}