微信小程序图片选择区域裁剪实现方法

前端之家收集整理的这篇文章主要介绍了微信小程序图片选择区域裁剪实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了微信小程序图片选择区域屏裁剪实现方法分享给大家。具体如下:

效果

HTML代码

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

CSS代码

Box{ width: 100%;

border-bottom: 2rpx #f98700 solid;
padding-bottom: 20rpx;
}
.cutImg_Box .cutImg_Boxt{
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;
padding: 20rpx;
}
.selectCutMode .selectCutMode_inact{
background: #f98700;
color: #fff;
padding: 20rpx;
}
.areaSelct
Box{
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;
}

JS代码部分

初始加载带入上一个页面带过来的参数路径

  //获取当前屏幕宽度 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 }) } }) },

红框根据手指移动方法

上方两个选择裁剪方式的按钮

等屏裁剪

局域裁剪

局域裁剪上方的滑动选择红框根据宽度等比例缩放

重新裁剪回到初始选择图片页面

现在IOS还有个坑就是裁剪不了,官方正在修复不知道什么时候好

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章