微信小程序图片选择区域裁剪怎么弄

　　介绍

小编给大家分享一下微信小程序图片选择区域裁剪怎么弄,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

具体如下:

效果图

微信小程序图片选择区域裁剪怎么弄

微信小程序图片选择区域裁剪怎么弄

微信小程序图片选择区域裁剪怎么弄

HTML代码

& lt; view 类=癷ndex_all_box"比; 　　,& lt; view 类=癷mgCut_header"比; 　　,& lt; view 类=癷mgCut_header_l", bindtap=& # 39; okCutImg& # 39;在开始裁剪& lt;/view> 　　,& lt; view 类=癷mgCut_header_m", bindtap=& # 39; clickUpImg& # 39;在点击上传图片& lt;/view> 　　,& lt; view 类=癷mgCut_header_r", bindtap=& # 39; okBtn& # 39;在点击确认& lt;/view> 　　,& lt;/view> 　　,& lt; !——,选择裁剪模式,——比; 　　,& lt; view 类=皊electCutMode",天气:如果=& # 39;{{alreay}} & # 39;比; 　　,& lt; view 类=皊electCutMode_in  {{cutType ? & # 39; selectCutMode_in_act& # 39;: & # 39; & # 39;}}“, bindtap=& # 39; etcType& # 39;比; 　　等才能屏裁剪 　　,& lt;/view> 　　,& lt; view 类=皊electCutMode_in  {{! cutType ? & # 39; selectCutMode_in_act& # 39;: & # 39; & # 39;}}“, bindtap=& # 39; areaType& # 39;比; 　　区才能域裁剪 　　,& lt;/view> 　　,& lt;/view> 　　,& lt; view 类=癮reaSelct_box",天气:如果=& # 39;{{! cutType ,,, alreay}} & # 39;比; 　　,& lt; slider  bindchange=癮reaChange", min=?0“, max=?00“, show-value 价值=https://www.yisu.com/zixun/' {{propor}} '/> 　　 　　<视图类=" cutImg_box”天气:如果={{! prienFlag}}的> 　　<视图类=" cutImg_box_t "> 　　<图像src=" {{cutImgUrl}}”模式=' widthFix '> 　　 　　<视图类=" clickCutImg_txt”bindtap=' againBtn '>重新裁剪 　　 　　<视图类=" allCavans”天气:如果={{prienFlag}}的风格=翱矶?{{canvasW}} px;高度:{{canvasH}} px”> 　　<帆布类=癱anvasSty”风格='宽度:{{canvasW}} px;高度:{{canvasH}} px的canvas-id=癱utImg disable-scroll”=罢媸怠眀indtouchmove=' canvasMove '> 　　<视图类=" allCavans_inbg”风格='宽度:{{canvasW}} px;高度:{{canvasH}} px;背景:url ({{img}}); background-size: 100% - 100%的> 　　 　　 　　 　　

CSS代码

.imgCut_header { 　　,填充:30 rpx; 　　,显示:flex; 　　,justify-content:之间的空间; 　　,对齐项目:中心; 　　背景:大敌;# 000; 　　,颜色:# fff; 　　,字体大小:24 rpx; 　　} 　　.allCavans { 　　,保证金:20 rpx 汽车; 　　,位置:相对; 　　} 　　.canvasSty { 　　,位置:绝对; 　　} 　　.cutImg_box { 　　,宽度:100%; 　　, 　　,边界底部:2 rpx  # f98700 固体; 　　,padding-bottom: 20 rpx; 　　} 　　.cutImg_box  .cutImg_box_t { 　　,宽度:90%; 　　,保证金:20 rpx 汽车; 　　} 　　{.cutImg_box 图像 　　,宽度:100%; 　　} 　　.cutImg_box  .cutImg_box_b { 　　,margin-top: 20 rpx; 　　,宽度:80%; 　　,身高:80 rpx; 　　,行高:80 rpx; 　　,背景:# f98700; 　　,颜色:# fff; 　　,这个特性:10 rpx; 　　,text-align:中心; 　　,保证金:0 rpx 汽车; 　　} 　　.selectCutMode { 　　,背景:# fff; 　　,显示:flex; 　　,justify-content:之间的空间; 　　,对齐项目:中心; 　　} 　　.selectCutMode  .selectCutMode_in { 　　,宽度:100%; 　　,text-align:中心; 　　,背景:# fff; 　　,颜色:# f98700; 　　,字体大小:24 rpx; 　　,填充:20 rpx; 　　} 　　.selectCutMode  .selectCutMode_in_act { 　　,背景:# f98700; 　　,颜色:# fff; 　　,填充:20 rpx; 　　} 　　.areaSelct_box { 　　,宽度:100%; 　　,显示:flex; 　　,对齐项目:中心; 　　,高度:50 rpx; 　　,justify-content:中心; 　　,margin-top: 20 rpx; 　　} 　　.areaSelct_box 滑块{ 　　,宽度:80%; 　　} 　　.cutImg_box  .clickCutImg_txt { 　　,宽度:100%; 　　,text-align:中心; 　　,高度:50 rpx; 　　,字体大小:24 rpx; 　　,行高:50 rpx; 　　,颜色:# 999; 　　}

JS代码部分

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

onLoad:, function (选项),{ 　　var 才能;that =,; 　　const 才能;ctx =, wx.createCanvasContext (& # 39; cutImg& # 39;); 　　ctx.setGlobalAlpha才能(0.4) 　　var 才能;aa =, & # 39; https://pintuanqu.oss-cn-hangzhou.aliyuncs.com/Uploads/Picture/goodsShow/20171201/5a2125fc86566.png& # 39; & lt; br /比;//获取当前屏幕宽度 　　var 才能;phoneW =,数量(util.nowPhoneWH () [0] * 90)/100; 　　var 才能;cutH =, 150; 　　wx.getImageInfo({才能 　　,,,src: aa, 　　,,,成功:function  (res), { 　　,,,var  w =, phoneW; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

微信小程序图片选择区域裁剪怎么弄