微信小程序里实现图片选择区域裁剪的方式探究

why 118 2024-08-30

本篇文章主要介绍了微信小程序图片选择区域屏裁剪实现方法，内容挺不错的，现在分享给大家，也给大家做个参考。

本文介绍了微信小程序图片选择区域屏裁剪实现方法，分享给大家。具体如下：

效果图

image.png

image.png

image.png

HTML代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<view class="index_all_box">

 <view class="imgCut_header">

 <view class="imgCut_header_l" bindtap=&#39;okCutImg&#39;>开始裁剪</view>

 <view class="imgCut_header_m" bindtap=&#39;clickUpImg&#39;>点击上传图片</view>

 <view class="imgCut_header_r" bindtap=&#39;okBtn&#39;>点击确认</view>

 </view>

 <!-- 选择裁剪模式 -->

 <view class="selectCutMode" wx:if=&#39;{{alreay}}&#39;>

 <view class="selectCutMode_in {{cutType?&#39;selectCutMode_in_act&#39;:&#39;&#39;}}" bindtap=&#39;etcType&#39;>

  等屏裁剪

 </view>

 <view class="selectCutMode_in {{!cutType?&#39;selectCutMode_in_act&#39;:&#39;&#39;}}" bindtap=&#39;areaType&#39;>

  区域裁剪

 </view>

 </view>

 <view class="areaSelct_box" wx:if=&#39;{{!cutType && alreay}}&#39;>

 <slider bindchange="areaChange" min="50" max="100" show-value value=&#39;{{propor}}&#39;/>

 </view>

 <view class="cutImg_box" wx:if=&#39;{{!prienFlag}}&#39;>

 <view class="cutImg_box_t">

  <image src="{{cutImgUrl}}" mode=&#39;widthFix&#39;></image>

 </view>

 <view class="clickCutImg_txt" bindtap=&#39;againBtn&#39;>重新裁剪</view>

 </view>

 <view class="allCavans" wx:if=&#39;{{prienFlag}}&#39; style=&#39;width: {{canvasW}}px;height: {{canvasH}}px&#39; >

 <canvas class=&#39;canvasSty&#39; style=&#39;width: {{canvasW}}px;height: {{canvasH}}px&#39; canvas-id=&#39;cutImg&#39; disable-scroll=&#39;true&#39; bindtouchmove=&#39;canvasMove&#39;></canvas>

 <view class="allCavans_inbg" style=&#39;width: {{canvasW}}px;height:{{canvasH}}px; background: url({{img}});background-size: 100% 100%&#39;></view>

 </view>

  

  

</view>


CSS代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

.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: center;

}

.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代码部分

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

onLoad: function (options) {

  var that = this;

  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;<br />　　//获取当前屏幕宽度

  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(&#39;red&#39;)

    ctx.fillRect(0, 0, phoneW, cutH)

    ctx.draw()

    that.setData({

     canvasW:w,

     canvasH:h,

     img:aa,

     cutH:cutH

    })

   }

  })

 },


确定选择区域开始裁剪


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

// 点击确认裁剪图片

 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(&#39;cutImg&#39;);

  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: &#39;cutImg&#39;,

   success: function(res) {

    var aa = res.tempFilePath

    that.setData({

     cutImgUrl:aa,

     prienFlag:false,

     alreay:false

    })

   }

  })

 },


红框根据手指移动方法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// 点击红框开始移动

 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(&#39;cutImg&#39;);

  ctx.setGlobalAlpha(0.4)

  ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)

  ctx.setFillStyle(&#39;red&#39;)

  ctx.fillRect(x, y, nowCutW, nowCutH)

  ctx.draw()

 },


上方两个选择裁剪方式的按钮

等屏裁剪


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//等屏裁剪

 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(&#39;cutImg&#39;);

  ctx.setGlobalAlpha(0.4)

  ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)

  ctx.setFillStyle(&#39;red&#39;)

  ctx.fillRect(0, 0, nowCutW, nowCutH)

  ctx.draw()

  that.setData({

   nowCutW:nowCutW,

   nowCutH:nowCutH,

   cutType:true

  })

 },


局域裁剪


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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(&#39;cutImg&#39;);

  ctx.setGlobalAlpha(0.4)

  ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)

  ctx.setFillStyle(&#39;red&#39;)

  ctx.fillRect(0,0, nowCutW, nowCutH)

  ctx.draw()

  that.setData({

   nowCutW:nowCutW,

   nowCutH:nowCutH,

   cutType:false

  })

 },


局域裁剪上方的滑动选择红框根据宽度等比例缩放


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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(&#39;cutImg&#39;);

  ctx.setGlobalAlpha(0.4)

  ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)

  ctx.setFillStyle(&#39;red&#39;)

  ctx.fillRect(that.data.cutX||0, that.data.cutY||0,nowCutW, nowCutH)

  ctx.draw()

  that.setData({

   nowCutW:nowCutW,

   nowCutH:nowCutH,

   propor:propor

  })

 },


重新裁剪回到初始选择图片的页面


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 重新裁剪

 againBtn:function(){

  var that = this;

  var data = that.data

  this.setData({

   prienFlag:true,

   alreay:true

  })

  const ctx = wx.createCanvasContext(&#39;cutImg&#39;);

  ctx.setGlobalAlpha(0.4)

  ctx.drawImage(data.img, 0, 0, data.canvasW, data.canvasH)

  ctx.setFillStyle(&#39;red&#39;)

  ctx.fillRect(that.data.cutX||0, that.data.cutY||0, data.nowCutW||data.canvasW, data.nowCutH||data.cutH)

  ctx.draw()

 },


现在IOS还有个坑就是裁剪不了,官方正在修复不知道什么时候好

以上就是本文的全部内容，希望对大家的学习有所帮助。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 参数 代码
上一篇:微信小程序中实现登录页云层漂浮动画效果的途径
下一篇:微信小程序上传 word、txt、Excel、PPT 等文件的详细解析
相关文章

 发表评论

暂时没有评论，来抢沙发吧~