lisp实现框选裁切_小程序图片选择区域/等屏裁剪实现方法

效果图

HTML代码

开始裁剪

点击上传图片

点击确认

等屏裁剪

区域裁剪

重新裁剪

CSS代码

.imgCut_header{

padding: 30rpx;

display: flex;

justify-content: space-between;

align-items: center;

background: #000;

color: #fff;

font-size: 24rpx;

}

.allCavans{

margin: 20rpx auto;

position: relative;

}

.canvasSty{

position: absolute;

}

.cutImg_box{

width: 100%;

border-bottom: 2rpx #f98700 solid;

padding-bottom: 20rpx;

}

.cutImg_box .cutImg_box_t{

width: 90%;

margin: 20rpx auto;

}

.cutImg_box image{

width: 100%;

}

.cutImg_box .cutImg_box_b{

margin-top: 20rpx;

width: 80%;

height: 80rpx;

line-height: 80rpx;

background: #f98700;

color: #fff;

border-radius: 10rpx;

text-align: center;

margin:0rpx auto;

}

.selectCutMode{

background: #fff;

display: flex;

justify-content: space-between;

align-items: center;

}

.selectCutMode .selectCutMode_in{

width: 100%;

text-align: center;

background: #fff;

color: #f98700;

font-size: 24rpx;