微信小程序图片选择区域实现裁剪功能方法教程 - 行业资讯

　　介绍

这篇文章将为大家详细讲解有关微信小程序图片选择区域实现裁剪功能方法教程,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

效果图

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