masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > applet WeChat > Pembangunan program mini > teks badan

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

小云云
Lepaskan： 2017-12-12 13:20:33
asal
2978 orang telah melayarinya

本文主要介绍了微信小程序图片选择区域屏裁剪实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

效果图

HTML代码


<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>
Salin selepas log masuk


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;
}
Salin selepas log masuk


JS代码部分

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


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
    })
   }
  })
 },
Salin selepas log masuk


确定选择区域开始裁剪


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


红框根据手指移动方法


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


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

等屏裁剪


//等屏裁剪
 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
  })
 },
Salin selepas log masuk


局域裁剪


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
  })
 },
Salin selepas log masuk


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


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
  })
 },
Salin selepas log masuk


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


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


现在IOS还有个坑就是裁剪不了,官方正在修复中。

相关推荐：

微信小程序功能函数小结

微信小程序页面跳转功能

微信小程序如何实现图片放大预览功能

Atas ialah kandungan terperinci 微信小程序图片选择区域实现裁剪功能方法教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
区域 实现 小程序
sumber：php.cn
Artikel sebelumnya：实例讲解微信小程序tabBar用法 Artikel seterusnya：实现微信小程序添加手机联系人功能教程
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Apakah amalan terbaik untuk memaparkan maklumat versi dalam aplikasi web? Saya sedang membangunkan aplikasi web. Apakah amalan terbaik untuk memaparkan maklumat ver...
daripada 2024-04-06 19:13:16
0
2
476
Mengapa teg jam saya lut sinar apabila ia ditetapkan kepada warna putih pepejal? Saya mempunyai html (dengan bootstrap) dan css, dalam html saya, saya mempunyai tag <hr...
daripada 2024-04-06 16:13:26
0
1
500
Tidak dapat mendapatkan data kuki daripada pelayan Go menggunakan React Selepas React saya mula pergi ke bahagian belakang dan menambah githubOAUTH dan sesi pada ...
daripada 2024-04-06 13:09:26
0
1
384
Ralat umum dalam Laravel 9.x: Medan 'id' tidak mempunyai nilai lalai Saya menggunakan UUID dalam apl saya dan saya telah melaksanakan sifat seperti yang ditunj...
daripada 2024-04-06 11:12:54
0
1
350
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan