Box"> 开始裁剪 点击上传图片 点击确认 等屏裁剪 区域裁剪 Box_t"> 重新裁剪

Box{ width: 100%;

border-bottom: 2rpx #f98700 solid;
padding-bottom: 20rpx;
}
.cutImg_Box .cutImg_Boxt{
width: 90%;
margin: 20rpx auto;
}
.cutImgBox 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;
padding: 20rpx;
}
.selectCutMode .selectCutMode_inact{
background: #f98700;
color: #fff;
padding: 20rpx;
}
.areaSelctBox{
width: 100%;
display: flex;
align-items: center;
height: 50rpx;
justify-content: center;
margin-top: 20rpx;
}
.areaSelct_Box slider{
width: 80%;
}
.cutImg_Box .clickCutImg_txt{
width: 100%;
text-align: center;
height: 50rpx;
font-size: 24rpx;
line-height: 50rpx;
color: #999;
}

　　//获取当前屏幕宽度 var phoneW = Number(util.nowPhoneWH()[0]*90)/100; var cutH = 150; wx.getImageInfo({ src: aa,success: function (res) { var w = phoneW; var h = (phoneW/Number(res.width))*Number(res.height) ctx.save() ctx.drawImage(aa,w,h) ctx.restore() ctx.setFillStyle('red') ctx.fillRect(0,phoneW,cutH) ctx.draw() that.setData({ canvasW:w,canvasH:h,img:aa,cutH:cutH }) } }) },

图片 okCutImg:function(){ var that = this; var canvasW = that.data.canvasW; var canvasH = that.data.canvasH; var nowCutW = that.data.cutType?canvasW:that.data.nowCutW; var nowCutH = that.data.cutType?that.data.cutH:that.data.nowCutH; var cutX = that.data.cutX; var cutY = that.data.cutY; const ctx = wx.createCanvasContext('cutImg'); ctx.setGlobalAlpha(1) ctx.drawImage(that.data.img,canvasW,canvasH) ctx.draw() wx.canvasToTempFilePath({ x: cutX,y: cutY,width: nowCutW,height: nowCutH,destWidth: nowCutW,destHeight: nowCutH,canvasId: 'cutImg',success: function(res) { var aa = res.tempFilePath that.setData({ cutImgUrl:aa,prienFlag:false,alreay:false }) } }) },