很快微信开发者平台

 找回密码
 注册
查看: 1432|回复: 0

微信小程序开发之图片选择区域、屏幕裁剪等实现方法

[复制链接]

30

主题

55

帖子

1075

积分

专家路上

积分
1075
 楼主| 发表于 2018-5-8 16:26:23 | 显示全部楼层 |阅读模式
本帖最后由 五道杠 于 2018-5-8 16:28 编辑

微信小程序开发之图片选择区域、屏幕裁剪等实现方法

先看效果图:

1150907-20171202142744917-367984404.png
1150907-20171202142851308-1168067254.png
1150907-20171202142905573-2141776985.png


代码如下:

WXML:
  1. <view class="index_all_box">
  2.     <view class="imgCut_header">
  3.         <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view>
  4.         <view class="imgCut_header_m" bindtap='clickUpImg'>点击上传图片</view>
  5.         <view class="imgCut_header_r" bindtap='okBtn'>点击确认</view>
  6.     </view>
  7.     <!-- 选择裁剪模式 -->
  8.     <view class="selectCutMode" wx:if='{{alreay}}'>
  9.         <view class="selectCutMode_in {{cutType?'selectCutMode_in_act':''}}" bindtap='etcType'>
  10.             等屏裁剪
  11.         </view>
  12.         <view class="selectCutMode_in {{!cutType?'selectCutMode_in_act':''}}" bindtap='areaType'>
  13.             区域裁剪
  14.         </view>
  15.     </view>
  16.     <view class="areaSelct_box" wx:if='{{!cutType && alreay}}'>
  17.         <slider bindchange="areaChange" min="50" max="100" show-value value='{{propor}}'/>
  18.     </view>
  19.     <view class="cutImg_box" wx:if='{{!prienFlag}}'>
  20.         <view class="cutImg_box_t">
  21.             <image src="{{cutImgUrl}}" mode='widthFix'></image>
  22.         </view>
  23.         <view class="clickCutImg_txt" bindtap='againBtn'>重新裁剪</view>
  24.     </view>
  25.     <view class="allCavans" wx:if='{{prienFlag}}' style='width: {{canvasW}}px;height: {{canvasH}}px' >
  26.         <canvas class='canvasSty' style='width: {{canvasW}}px;height: {{canvasH}}px' canvas-id='cutImg' disable-scroll='true' bindtouchmove='canvasMove'></canvas>
  27.         <view class="allCavans_inbg"  style='width: {{canvasW}}px;height:{{canvasH}}px; background: url({{img}});background-size: 100% 100%'></view>
  28.     </view>
  29.      
  30.      
  31. </view>
复制代码

WXSS:
  1. .imgCut_header{
  2.     padding: 30rpx;
  3.     display: flex;
  4.     justify-content: space-between;
  5.     align-items: center;
  6.     background: #000;
  7.     color: #fff;
  8.     font-size: 24rpx;
  9. }
  10. .allCavans{
  11.     margin: 20rpx auto;
  12.     position: relative;
  13. }
  14. .canvasSty{
  15.     position: absolute;
  16. }
  17. .cutImg_box{
  18.     width: 100%;
  19.      
  20.     border-bottom: 2rpx #f98700 solid;
  21.     padding-bottom: 20rpx;
  22. }
  23. .cutImg_box .cutImg_box_t{
  24.     width: 90%;
  25.     margin: 20rpx auto;
  26. }
  27. .cutImg_box image{
  28.     width: 100%;
  29. }
  30. .cutImg_box .cutImg_box_b{
  31.     margin-top: 20rpx;
  32.     width: 80%;
  33.     height: 80rpx;
  34.     line-height: 80rpx;
  35.     background: #f98700;
  36.     color: #fff;
  37.     border-radius: 10rpx;
  38.     text-align: center;
  39.     margin:0rpx auto;
  40. }
  41. .selectCutMode{
  42.     background: #fff;
  43.     display: flex;
  44.     justify-content: space-between;
  45.     align-items: center;
  46. }
  47. .selectCutMode .selectCutMode_in{
  48.     width: 100%;
  49.     text-align: center;
  50.     background: #fff;
  51.     color: #f98700;
  52.     font-size: 24rpx;
  53.     padding: 20rpx;
  54. }
  55. .selectCutMode .selectCutMode_in_act{
  56.     background: #f98700;
  57.     color: #fff;
  58.     padding: 20rpx;
  59. }
  60. .areaSelct_box{
  61.     width: 100%;
  62.     display: flex;
  63.     align-items: center;
  64.     height: 50rpx;
  65.     justify-content: center;
  66.     margin-top: 20rpx;
  67. }
  68. .areaSelct_box slider{
  69.     width: 80%;
  70. }
  71. .cutImg_box .clickCutImg_txt{
  72.     width: 100%;
  73.     text-align: center;
  74.     height: 50rpx;
  75.     font-size: 24rpx;
  76.     line-height: 50rpx;
  77.     color: #999;
  78. }
复制代码

js:初始加载带入上一个页面带过来的参数路径
  1. onLoad: function (options) {
  2.     var that = this;
  3.     const ctx = wx.createCanvasContext('cutImg');
  4.     ctx.setGlobalAlpha(0.4)
  5.     var aa = 'https://pintuanqu.oss-cn-hangzhou.aliyuncs.com/Uploads/Picture/goodsShow/20171201/5a2125fc86566.png'<br>  //获取当前屏幕宽度
  6.     var phoneW = Number(util.nowPhoneWH()[0]*90)/100;
  7.     var cutH = 150;
  8.     wx.getImageInfo({
  9.       src: aa,
  10.       success: function (res) {
  11.         var w = phoneW;
  12.         var h = (phoneW/Number(res.width))*Number(res.height)
  13.         ctx.save()
  14.         ctx.drawImage(aa, 0, 0, w, h)
  15.         ctx.restore()
  16.         ctx.setFillStyle('red')
  17.         ctx.fillRect(0, 0, phoneW, cutH)
  18.         ctx.draw()
  19.         that.setData({
  20.           canvasW:w,
  21.           canvasH:h,
  22.           img:aa,
  23.           cutH:cutH
  24.         })
  25.       }
  26.     })
  27.   },
复制代码

确定选择区域开始裁剪
  1. // 点击确认裁剪图片
  2.   okCutImg:function(){
  3.     var that = this;
  4.     var canvasW = that.data.canvasW;
  5.     var canvasH = that.data.canvasH;
  6.     var nowCutW = that.data.cutType?canvasW:that.data.nowCutW;
  7.     var nowCutH = that.data.cutType?that.data.cutH:that.data.nowCutH;
  8.     var cutX = that.data.cutX;
  9.     var cutY = that.data.cutY;
  10.     const ctx = wx.createCanvasContext('cutImg');
  11.     ctx.setGlobalAlpha(1)
  12.     ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
  13.     ctx.draw()
  14.     wx.canvasToTempFilePath({
  15.       x: cutX,
  16.       y: cutY,
  17.       width: nowCutW,
  18.       height: nowCutH,
  19.       destWidth: nowCutW,
  20.       destHeight: nowCutH,
  21.       canvasId: 'cutImg',
  22.       success: function(res) {
  23.         var aa = res.tempFilePath
  24.         that.setData({
  25.           cutImgUrl:aa,
  26.           prienFlag:false,
  27.           alreay:false
  28.         })
  29.       }
  30.     })
  31.   },
复制代码

红框根据手指移动方法
  1. // 点击红框开始移动
  2.   canvasMove:function(e){
  3.     var that = this;
  4.     var canvasW = that.data.canvasW;
  5.     var canvasH = that.data.canvasH;
  6.     var nowCutW = that.data.cutType?canvasW:that.data.nowCutW;
  7.     var nowCutH = that.data.cutType?that.data.cutH:that.data.nowCutH
  8.     var touches = e.touches[0];  
  9.     var x = touches.x;
  10.     var y = touches.y-(Number(nowCutH)/2);
  11.     that.data.cutType?x=0:x=x-(Number(nowCutW)/2);
  12.     that.setData({
  13.       cutX:x,
  14.       cutY:y
  15.     })
  16.     const ctx = wx.createCanvasContext('cutImg');
  17.     ctx.setGlobalAlpha(0.4)
  18.     ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
  19.     ctx.setFillStyle('red')
  20.     ctx.fillRect(x, y, nowCutW, nowCutH)
  21.     ctx.draw()
  22.   },<br><br>
复制代码

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

等屏裁剪
  1. //等屏裁剪
  2.   etcType:function(){
  3.     var that = this;
  4.     var propor = 100;
  5.     var canvasW = that.data.canvasW;
  6.     var canvasH = that.data.canvasH;
  7.     var cutH = that.data.cutH;
  8.     var nowCutW = (Number(canvasW)*propor)/100
  9.     var nowCutH = (Number(cutH)*propor)/100
  10.     const ctx = wx.createCanvasContext('cutImg');
  11.     ctx.setGlobalAlpha(0.4)
  12.     ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
  13.     ctx.setFillStyle('red')
  14.     ctx.fillRect(0, 0, nowCutW, nowCutH)
  15.     ctx.draw()
  16.     that.setData({
  17.       nowCutW:nowCutW,
  18.       nowCutH:nowCutH,
  19.       cutType:true
  20.     })
  21.   },
复制代码

局域裁剪
  1. areaType:function(){
  2.     var that = this;
  3.     var propor = that.data.propor;
  4.     var canvasW = that.data.canvasW;
  5.     var canvasH = that.data.canvasH;
  6.     var cutH = that.data.cutH;
  7.     var nowCutW = (Number(canvasW)*propor)/100
  8.     var nowCutH = (Number(cutH)*propor)/100
  9.     const ctx = wx.createCanvasContext('cutImg');
  10.     ctx.setGlobalAlpha(0.4)
  11.     ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
  12.     ctx.setFillStyle('red')
  13.     ctx.fillRect(0,0, nowCutW, nowCutH)
  14.     ctx.draw()
  15.     that.setData({
  16.       nowCutW:nowCutW,
  17.       nowCutH:nowCutH,
  18.       cutType:false
  19.     })
  20.   },
复制代码

局域裁剪上方的滑动选择红框根据宽度等比例缩放
  1. areaChange:function(e){
  2.     var that = this;
  3.     var propor = e.detail.value;
  4.     var canvasW = that.data.canvasW;
  5.     var canvasH = that.data.canvasH;
  6.     var cutH = that.data.cutH;
  7.     var nowCutW = (Number(canvasW)*propor)/100
  8.     var nowCutH = (Number(cutH)*propor)/100
  9.     const ctx = wx.createCanvasContext('cutImg');
  10.     ctx.setGlobalAlpha(0.4)
  11.     ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
  12.     ctx.setFillStyle('red')
  13.     ctx.fillRect(that.data.cutX||0, that.data.cutY||0,nowCutW, nowCutH)
  14.     ctx.draw()
  15.     that.setData({
  16.       nowCutW:nowCutW,
  17.       nowCutH:nowCutH,
  18.       propor:propor
  19.     })
  20.   },
复制代码

重新裁剪回到初始选择图片的页面
  1. // 重新裁剪
  2.   againBtn:function(){
  3.     var that = this;
  4.     var data = that.data
  5.     this.setData({
  6.       prienFlag:true,
  7.       alreay:true
  8.     })
  9.     const ctx = wx.createCanvasContext('cutImg');
  10.     ctx.setGlobalAlpha(0.4)
  11.     ctx.drawImage(data.img, 0, 0, data.canvasW, data.canvasH)
  12.     ctx.setFillStyle('red')
  13.     ctx.fillRect(that.data.cutX||0, that.data.cutY||0, data.nowCutW||data.canvasW, data.nowCutH||data.cutH)
  14.     ctx.draw()
  15.   },
复制代码

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

另外:canvas截取图片会模糊,裁剪的时候放大canvas可以解决


原文:http://www.cnblogs.com/lcming/p/7954211.html
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 京ICP备2021022608号 )

GMT+8, 2021-12-2 22:59 , Processed in 0.029136 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表