How to realize the clipping function of picture selection area by WeChat Mini Programs
In this article, the editor introduces in detail "WeChat Mini Programs how to achieve the image selection region clipping function". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "WeChat Mini Programs how to achieve the picture selection region clipping function" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.
Effect picture
HTML code
Start cropping Click upload Picture Click confirm screen cropping area cropping and re-cropping
CSS code
.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} .selectCutMode .selectCutMode _ in {width: 100%; text-align: center; background: # fff; color: # f98700; font-size: 24rpx; padding: 20rpx } .selectCutMode .selectCutMode _ in_act {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 code section
The initial load brings the parameter path from the previous page
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' / / get the current screen width 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, 0,0, w, h) ctx.restore () ctx.setFillStyle ('red') ctx.fillRect (0,0, phoneW, cutH) ctx.draw () that.setData ({canvasW:w, canvasH:h, img:aa, cutH:cutH})})}
Make sure the selection area starts cropping
/ / Click to confirm cropping 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, 0,0, 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})})}
The red box moves according to the finger
/ / Click the red box to start moving 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, 0,0, canvasW, canvasH) ctx.setFillStyle (' red') ctx.fillRect (x, y, nowCutW, nowCutH) ctx.draw ()
The top two buttons to choose the clipping method
Equal screen cutting
/ / Equal screen clipping 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) / 100var nowCutH = (Number (cutH) * propor) / 100const ctx = wx.createCanvasContext ('cutImg') Ctx.setGlobalAlpha ctx.drawImage (that.data.img, 0,0, canvasW, canvasH) ctx.setFillStyle ('red') ctx.fillRect (0,0, nowCutW, nowCutH) ctx.draw () that.setData ({nowCutW:nowCutW, nowCutH:nowCutH, cutType:true})}
Local tailoring
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) / 100var nowCutH = (Number (cutH) * propor) / 100const ctx = wx.createCanvasContext ('cutImg') Ctx.setGlobalAlpha (0.4) ctx.drawImage (that.data.img, canvasW, canvasH) ctx.setFillStyle ('red') ctx.fillRect (0, nowCutW, nowCutH) ctx.draw () that.setData ({nowCutW:nowCutW, nowCutH:nowCutH, cutType:false})}
The sliding selection red box above the local crop is scaled in proportion to the width
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) / 100var nowCutH = (Number (cutH) * propor) / 100const ctx = wx.createCanvasContext ('cutImg') Ctx.setGlobalAlpha (0.4) ctx.drawImage (that.data.img, 0,0, canvasW, canvasH) ctx.setFillStyle ('red') ctx.fillRect (that.data.cutX | | 0, that.data.cutY | | 0meme now CutW, nowCutH) ctx.draw () that.setData ({nowCutW:nowCutW, nowCutH:nowCutH, propor:propor})}
Crop back to the page where the picture was originally selected
/ / reschedule 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, 0,0, data.canvasW, data.canvasH) ctx.setFillStyle ('red') ctx.fillRect (that.data.cutX | | 0, that.data.cutY | | 0, data.nowCutW | | data.canvasW, data.nowCutH | | data.cutH) ctx.draw ()}. This is the end of the article "how to achieve the clipping function of image selection area by WeChat Mini Programs". If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the articles, you are welcome to follow the industry information channel.
