如何剪切微信小程序(微信编辑图片小程序)的图片选择区

本文主要介绍微信小程序图片选择区屏幕的裁剪方法。内容挺好的。现在分享给大家，给大家一个参考。

本文介绍了微信小程序图片选择区截屏的实现方法，分享给大家。如下所示:

翻译

HTML代码

& ltview class = & quotindex _ all _ box & quot& gt& ltview class = & quotimgCut _ header & quot& gt& ltview class = & quotimgCut _ header _ l & quotbindtap = & # 039okCutImg & # 039& gt开始裁剪

CSS代码

。img cut _ header { padding:30 rpx；显示器:flexjustify -内容:space -之间；align -项:居中；背景:# 000；颜色:# ffffont -size:24r px；}.allCavans { margin:20 rpx auto；位置:相对；}.canvasSty{ position:绝对；}.cutImg_box{宽度:100%；border-bottom: 2rpx #f98700实心；padding -bottom:20 rpx；}.cutImg_box。cutImg_box_t{宽度:90%；保证金:20rpx自动；}.cutImg_box图像{宽度:100%；}.cutImg_box。cutImg _ box _ b { margin -top:20 rpx；宽度:80%；身高:80rpxline -高度:80rpx背景:# f98700颜色:# fffborder -半径:10rpxtext-align:居中；margin:0 rpx auto；}.selectCutMode { background:# fff；显示器:flexjustify -内容:space -之间；align -项:居中；}.选择切割模式。selectCutMode _ in { width:100%；text-align:居中；背景:# fff颜色:# f98700font -size:24r px；填充:20rpx}.选择切割模式。selectCutMode _ in _ act { background:# f 98700；颜色:# fff填充:20rpx}.areas elct _ box { width:100%；显示器:flexalign -项:居中；高度:50rpxjustify -内容:居中；margin -top:20 rpx；}.areaSelct_box滑块{ width:80%；}.cutImg_box。clickCutImg _ txt { width:100%；text-align:居中；高度:50rpxfont -size:24r px；line -高度:50rpx颜色:# 999；}

JS代码部分

最初加载从上一页带来的参数路径。

onLoad:function(options){ var that = this；const CTX = wx . createcanvascontext(& # 039；cutImg & # 039);CTX . set global alpha(0.4)var aa = & # 039；https://pintuanqu . OSS -cn-Hangzhou . aliyuncs . com/Uploads/Picture/goods show/2017 12 01/5a 2125 fc 86566 . png & # 039；& ltbr/>；//获取当前屏幕宽度varphonew = number(util . nowphonewh()[0]* 90)/100；var cutH = 150wx.getImageInfo({ src: aa，success:function(RES){ var w = phoneW；var h =(phoneW/Number(RES . width))* Number(RES . height)CTX . save()CTX . draw image(aa，0，0，w，h)CTX . restore()CTX . setfillstyle(& # 039；红色& # 039；)ctx.fillRect(0，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(& # 039；cutImg & # 039);CTX . set global alpha(1)CTX . draw image(that . data . img，0，0，canvasW，canvasH)CTX . draw()wx . canvastotempfilepath({ x:cutX，y: cutY，width: nowCutW，height: nowCutH，destWidth: nowCutW，destHeight: nowCutH，canvasId:& # 039；cutImg & # 039，success:function(RES){ var aa = RES . tempfile path that . setdata({ cutImgUrl:aa，prienFlag:false，alreay:false }) } }) }，

红框显示手指移动方法

//点击红框开始移动画布move: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.xvar 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(& # 039；cutImg & # 039);CTX . set global alpha(0.4)CTX . draw image(that . data . img，0，0，canvasW，canvasH)CTX . setfillstyle(& # 039；红色& # 039；)ctx.fillRect(x，y，nowCutW，nowCutH) ctx.draw() }，

用于选择裁剪方法的顶部两个按钮

均等屏幕剪辑

//etc类型:function(){ var that = this；var propor = 100var 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(& # 039；cutImg & # 039);CTX . set global alpha(0.4)CTX . draw image(that . data . img，0，0，canvasW，canvasH)CTX . setfillstyle(& # 039；红色& # 039；)ctx.fillRect(0，0，nowCutW，nowCutH)CTX . draw()that . setdata({ nowCutW:nowCutW，nowCutH:nowCutH，cutType:true }) }，

局部切割

area type: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(& # 039；cutImg & # 039);CTX . set global alpha(0.4)CTX . draw image(that . data . img，0，0，canvasW，canvasH)CTX . setfillstyle(& # 039；红色& # 039；)ctx.fillRect(0，0，nowCutW，nowCutH)CTX . draw()that . setdata({ nowCutW:nowCutW，nowCutH:nowCutH，cutType:false }) }，

局部区域上方的滑动选择红色框根据宽度按比例缩放。

area change: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(& # 039；cutImg & # 039);CTX . set global alpha(0.4)CTX . draw image(that . data . img，0，0，canvasW，canvasH)CTX . setfillstyle(& # 039；红色& # 039；)ctx.fillRect(that.data.cutX||0，that.data.cutY||0，nowCutW，nowCutH)CTX . draw()that . setdata({ nowCutW:nowCutW，nowCutH:nowCutH，propor:propor }) }，

裁剪回原始选定图片的页面。

//重新剪辑一遍BTN:function(){ var that = this；var data = that . data this . setdata({ prien flag:true，alreay:true })const CTX = wx . createcanvascontext(& # 039；cutImg & # 039);CTX . set global alpha(0.4)CTX . draw image(data . img，0，0，data.canvasW，data . canvash)CTX . setfillstyle(& # 039；红色& # 039；)ctx.fillRect(that.data.cutX||0，that.data.cutY||0，data.nowCutW||data.canvasW，data . nowcuth | | data . cuth)CTX . draw()}，

IOS还是有个洞，但是割不开。官方正在修复。我不知道它什么时候能准备好。