微信小程序如何调整裁剪图片大小以适应长尾需求？

本文共计1199个文字，预计阅读时间需要5分钟。

原文：本文字例为大家分享了微信小程序实现裁剪图片大小的具体代码，供大家参考，具体内容如下+效果图.wxml+button bindtap=uploadtap 上传图片/button+image style=width: 100%; mode=widthFix src={{canfi}}

以下代码展示了如何在小程序中实现图片裁剪功能，包括上传按钮和图片显示。具体实现如下：

本文实例为大家分享了微信小程序实现裁剪图片大小的具体代码，供大家参考，具体内容如下

效果图

.wxml

<button bindtap="uploadtap">上传图片</button> <image style="width: 100%;" mode="widthFix" src="{{canfile_image}}"></image> <canvas canvas-id="myCanvas" id="myCanvas" style="width:100%;height:70vh;"></canvas> <view class="canvas_model" wx:if="{{canvas_arr.show}}" catchtouchmove="setTouchMove">   <view class="canvas_view" style="width: {{canvas_arr.width}}px;height: {{canvas_arr.height}}px;"   bindtouchstart="handletouchstart" bindtouchmove="handletouchmove">     <image style="width:100%;height:100%;" src="{{canvas_arr.src}}"></image>     <view style="{{color_status?'background: rgba(0, 0, 0, 0.6);':''}}">       <view class="canvas_horn" style="height:{{cutting.height}}px;top:{{canvas_y}}px;">         <view></view>         <view></view>         <view></view>         <view></view>         <view></view>         <view></view>         <image style="width: {{canvas_arr.width}}px;height: {{canvas_arr.height}}px;top:-{{canvas_y}}px;" src="{{canvas_arr.src}}"></image>       </view>     </view>   </view>   <view class="canvas_bar" wx:if="{{cutting.show}}">     <view bindtap="color_tap">×</view>     <view class="bar_tab {{color_status?'tab_cation':''}}" bindtap="color_tap" data-type="1">       <view>浅色</view>       <view>深色</view>       <view></view>     </view>     <view bindtap="ationimg">√</view>   </view> </view>

.wxss

 .canvas_model{width: 100%;height: 100vh;position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.6);z-index: 10; display:flex;justify-content: center;padding-top: 10vh;animation:model 0.3s;} @keyframes model{   from { opacity: 0;transform: scale(0.5); }   to { opacity:1;transform: scale(1); } } .canvas_view{float: left;position: relative;} .canvas_view>view{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(255, 255, 255, 0.4);transition: all 0.3s;} .canvas_horn{position: absolute;left: 0;width: 100%;overflow: hidden;} .canvas_horn>view{width: 40rpx;height: 40rpx;position: absolute;z-index: 1;} .canvas_horn>image{position: absolute;left: 0;top: 0;} .canvas_horn>view:nth-child(1){border-left: 2px solid #fff;border-top: 2px solid #fff;left: 0;top: 0;} .canvas_horn>view:nth-child(2){border-right: 2px solid #fff;border-top: 2px solid #fff;right: 0;top: 0;} .canvas_horn>view:nth-child(3){border-left: 2px solid #fff;border-bottom:2px solid #fff;left: 0;bottom: 0;} .canvas_horn>view:nth-child(4){border-right: 2px solid #fff;border-bottom: 2px solid #fff;right: 0;bottom: 0;} .canvas_horn>view:nth-child(5){width: 60rpx;height: 2px;background: #fff;top: 0;left: 0;right: 0;margin: 0 auto;} .canvas_horn>view:nth-child(6){width: 60rpx;height: 2px;background: #fff;bottom: 0;left: 0;right: 0;margin: 0 auto;} .canvas_bar{width: 100%;height: 14vh;display: flex;align-items: center;justify-content: space-between;background: #fff; position: absolute;left: 0;bottom: 0;animation:bartion 0.5s;} @keyframes bartion{   from { bottom: -14vh; }   to { bottom: 0; } } .canvas_bar>view:nth-child(1),.canvas_bar>view:nth-child(3){width: 160rpx;height: 100%;display: flex;align-items: center; justify-content: center;font-size: 44rpx;font-weight: 700;} .bar_tab{width: 300rpx;display: flex;height: 60rpx;border-radius: 10rpx;border: 1px solid #f4f4f4;line-height: 60rpx; position: relative;font-size: 24rpx;color: #333;} .bar_tab>view{width: 50%;height: 100%;text-align: center;position: relative;z-index: 1;transition: all 0.3s;} .bar_tab>view:nth-child(1){color: #fff;} .bar_tab>view:nth-child(3){position: absolute;left: 0;top: 0;background: #0081ff;border-radius: 10rpx;z-index: 0;} .tab_cation>view:nth-child(1){color: #000;} .tab_cation>view:nth-child(2){color: #fff;} .tab_cation>view:nth-child(3){left: 50%;} #myCanvas{position: absolute;left: 0;top: -71vh;z-index: -1;opacity: 0;}

.js

Page({   data: {     canvas_arr:{       src:'',       width:parseInt(wx.getSystemInfoSync().windowWidth * 0.9),       height:parseInt(wx.getSystemInfoSync().windowHeight * 0.7),       show:false     },     cutting:{       height:0,       max_y:0,       show:false     },     canvas_y:0,     color_status:false,     canfile_image:'',   },   color_tap(e){     var type = e?e.currentTarget.dataset.type:0     if(type == 1){       this.setData({         color_status:!this.data.color_status       })     }else{       this.data.canvas_arr.show = false       this.data.canvas_arr.height = parseInt(wx.getSystemInfoSync().windowHeight * 0.7)       this.data.cutting.show = false       this.data.cutting.src = ''       this.setData({         canvas_arr:this.data.canvas_arr,         cutting:this.data.cutting,         canvas_y:0,       })     }   },   setTouchMove(e){return;},   uploadtap(e){     var that = this     wx.chooseImage({       count:1,       success (res) {         const tempFilePaths = res.tempFilePaths[0]         that.data.canvas_arr.src = tempFilePaths         wx.getImageInfo({           src: tempFilePaths,           success (res) {             that.data.canvas_arr.show = true             that.data.cutting.show = true             that.data.cutting.height = that.data.canvas_arr.width / 2             var height = parseInt(res.height / (res.width / that.data.canvas_arr.width))             that.data.canvas_arr.height = height > that.data.canvas_arr.height ? that.data.canvas_arr.height : height             that.data.cutting.max_y = that.data.canvas_arr.height - that.data.cutting.height             that.setData({               canvas_arr:that.data.canvas_arr             })             setTimeout(function () {               that.setData({                 cutting:that.data.cutting               })             },500)           }         })       }     })   },   handletouchstart: function (e) {     this.data.startY = e.touches[0].clientY   },   handletouchmove (e) {     let currentY = e.touches[0].clientY - this.data.startY     if(currentY > 0){       this.setData({         canvas_y:currentY > this.data.cutting.max_y?this.data.cutting.max_y:currentY,       })     }else{       this.setData({         canvas_y:0       })     }   },   ationimg(e){     var that = this     var canvas_img = wx.createCanvasContext('myCanvas')     canvas_img.width = that.data.canvas_arr.width     canvas_img.height = that.data.canvas_arr.height     canvas_img.drawImage(that.data.canvas_arr.src,0,0,canvas_img.width,canvas_img.height)     canvas_img.draw(true,(()=>{       wx.canvasToTempFilePath({         x: 0,         y: that.data.canvas_y,         width:that.data.canvas_arr.width,         height:that.data.cutting.height,         canvasId: 'myCanvas',         success: function (res) {           that.setData({             canfile_image:res.tempFilePath           })           that.color_tap()           wx.showToast({             title: '裁剪成功~',             icon: 'none',             duration: 3000           })         }       });     }))   }, })

功能主要针对轮播图片尺寸，不合适可自行修改比例

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