微信小程序图片选择区域裁剪实现方法

程序员文章站 2022-06-25 13:29:51

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

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

效果图

微信小程序图片选择区域裁剪实现方法

html代码

<view class="index_all_box">
 <view class="imgcut_header">
 <view class="imgcut_header_l" bindtap='okcutimg'>开始裁剪</view>
 <view class="imgcut_header_m" bindtap='clickupimg'>点击上传图片</view>
 <view class="imgcut_header_r" bindtap='okbtn'>点击确认</view>
 </view>
 <!-- 选择裁剪模式 -->
 <view class="selectcutmode" wx:if='{{alreay}}'>
 <view class="selectcutmode_in {{cuttype?'selectcutmode_in_act':''}}" bindtap='etctype'>
  等屏裁剪
 </view>
 <view class="selectcutmode_in {{!cuttype?'selectcutmode_in_act':''}}" bindtap='areatype'>
  区域裁剪
 </view>
 </view>
 <view class="areaselct_box" wx:if='{{!cuttype && alreay}}'>
 <slider bindchange="areachange" min="50" max="100" show-value value='{{propor}}'/>
 </view>
 <view class="cutimg_box" wx:if='{{!prienflag}}'>
 <view class="cutimg_box_t">
  <image src="{{cutimgurl}}" mode='widthfix'></image>
 </view>
 <view class="clickcutimg_txt" bindtap='againbtn'>重新裁剪</view>
 </view>
 <view class="allcavans" wx:if='{{prienflag}}' style='width: {{canvasw}}px;height: {{canvash}}px' >
 <canvas class='canvassty' style='width: {{canvasw}}px;height: {{canvash}}px' canvas-id='cutimg' disable-scroll='true' bindtouchmove='canvasmove'></canvas>
 <view class="allcavans_inbg" style='width: {{canvasw}}px;height:{{canvash}}px; background: url({{img}});background-size: 100% 100%'></view>
 </view>
 
 
</view>

css代码

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

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

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'<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('red')
    ctx.fillrect(0, 0, phonew, cuth)
    ctx.draw()
    that.setdata({
     canvasw:w,
     canvash:h,
     img:aa,
     cuth:cuth
    })
   }
  })
 },

确定选择区域开始裁剪

// 点击确认裁剪图片
 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
    })
   } 
  })
 },

红框根据手指移动方法

// 点击红框开始移动
 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()
 },

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

等屏裁剪

//等屏裁剪
 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('cutimg');
  ctx.setglobalalpha(0.4)
  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
  })
 },

局域裁剪

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('cutimg');
  ctx.setglobalalpha(0.4)
  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:false
  })
 },

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

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('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||0,nowcutw, nowcuth)
  ctx.draw()
  that.setdata({
   nowcutw:nowcutw,
   nowcuth:nowcuth,
   propor:propor
  })
 },

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

// 重新裁剪
 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()
 },

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

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

上一篇：解决JavaScript实现省市联动过程中的bug

下一篇： three.js中文文档学习之如何本地运行详解

微信小程序图片选择区域裁剪实现方法

微信小程序城市选择及搜索功能的方法

微信小程序实现工作时间段选择

微信小程序实现商品属性联动选择

微信小程序实现联动选择器

微信小程序实现分享朋友圈的图片功能示例

微信小程序中使元素占满整个屏幕高度实现方法

微信小程序实现自定义picker选择器弹窗内容

微信小程序实现的图片保存功能示例

微信小程序中使用echarts的实现方法

微信小程序实现Session功能及无法获取session问题的解决方法