本文介绍了微信小程序图片选择区域屏裁剪实现方法，分享给大家。具体如下：
效果图
HTML代码
rush:xhtml;">
Box">
等屏裁剪
区域裁剪
Box_t">
重新裁剪
CSS代码
rush: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;
}
.canva
ssty{
position: absolute;
}
.cutImg_
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;
}
JS代码部分
初始加载带入上一个页面带过来的参数路径
rush:js;">
onLoad: function (options) {
var that = this;
const ctx = wx.createCanvasContext('cutImg');
ctx.setGlobalAlpha(0.4)
var aa = 'https://pintuanqu.oss-cn-hangzhou.aliyuncs.com/Uploads/Picture/goodsShow/20171201/5a2125fc86566.png'
//
获取当前屏幕宽度
var phoneW = Number(util.
NowPhoneWH()[0]*90)/100;
var cutH = 150;
wx.ge
timageInfo({
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
})
}
})
},
确定选择区域开始裁剪
rush:js;">
// 点击确认裁剪
图片
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({
cut
imgurl:aa,prienFlag:false,alreay:false
})
}
})
},
红框根据手指移动方法
rush:js;">
// 点击红框开始移动
canvasMove:function(e){
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
touches = e.
touches[0];
var x =
touches.x;
var y =
touches.y-(Number(
NowCutH)/2);
that.data.cutType?x=0:x=x-(Number(
NowCutW)/2);
that.setData({
cutX:x,cutY:y
})
const ctx = wx.createCanvasContext('cutImg');
ctx.setGlobalAlpha(0.4)
ctx.drawImage(that.data.img,canvasH)
ctx.setFillStyle('red')
ctx.fillRect(x,y,
NowCutW,
NowCutH)
ctx.draw()
},
上方两个选择裁剪方式的按钮
等屏裁剪
rush:js;">
//等屏裁剪
etcType:function(){
var that = this;
var propor = 100;
var canvasW = that.data.canvasW;
var canvasH = that.data.canvasH;
var cutH = that.data.cutH;
var
NowCutW = (Number(canvasW)*propor)/100
var
NowCutH = (Number(cutH)*propor)/100
const ctx = wx.createCanvasContext('cutImg');
ctx.setGlobalAlpha(0.4)
ctx.drawImage(that.data.img,canvasH)
ctx.setFillStyle('red')
ctx.fillRect(0,
NowCutH)
ctx.draw()
that.setData({
NowCutW:
NowCutW,
NowCutH:
NowCutH,cutType:true
})
},
局域裁剪
rush:js;">
areaType:function(){
var that = this;
var propor = that.data.propor;
var canvasW = that.data.canvasW;
var canvasH = that.data.canvasH;
var cutH = that.data.cutH;
var
NowCutW = (Number(canvasW)*propor)/100
var
NowCutH = (Number(cutH)*propor)/100
const ctx = wx.createCanvasContext('cutImg');
ctx.setGlobalAlpha(0.4)
ctx.drawImage(that.data.img,cutType:false
})
},
局域裁剪上方的滑动选择红框根据宽度等比例缩放
rush:js;">
areaChange:function(e){
var that = this;
var propor = e.detail.value;
var canvasW = that.data.canvasW;
var canvasH = that.data.canvasH;
var cutH = that.data.cutH;
var
NowCutW = (Number(canvasW)*propor)/100
var
NowCutH = (Number(cutH)*propor)/100
const ctx = wx.createCanvasContext('cutImg');
ctx.setGlobalAlpha(0.4)
ctx.drawImage(that.data.img,canvasH)
ctx.setFillStyle('red')
ctx.fillRect(that.data.cutX||0,that.data.cutY||0,propor:propor
})
},
重新裁剪回到初始选择图片的页面
rush:js;">
// 重新裁剪
againBtn:function(){
var that = this;
var data = that.data
this.setData({
prienFlag:true,alreay:true
})
const ctx = wx.createCanvasContext('cutImg');
ctx.setGlobalAlpha(0.4)
ctx.drawImage(data.img,data.canvasW,data.canvasH)
ctx.setFillStyle('red')
ctx.fillRect(that.data.cutX||0,data.
NowCutW||data.canvasW,data.
NowCutH||data.cutH)
ctx.draw()
},
现在IOS还有个坑就是裁剪不了,官方正在修复不知道什么时候好
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
