微信小程序实现裁剪图片大小微信小程序实现裁剪图片大小

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

.wxml

×浅色深色√

.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:0if(type == 1){this.setData({color_status:!this.data.color_status})}else{this.data.canvas_arr.show = falsethis.data.canvas_arr.height = parseInt(wx.getSystemInfoSync().windowHeight * 0.7)this.data.cutting.show = falsethis.data.cutting.srchttps://www.it610.com/article/= ''this.setData({canvas_arr:this.data.canvas_arr,cutting:this.data.cutting,canvas_y:0,})}},setTouchMove(e){return; },uploadtap(e){var that = thiswx.chooseImage({count:1,success (res) {const tempFilePaths = res.tempFilePaths[0]that.data.canvas_arr.src = https://www.it610.com/article/tempFilePathswx.getImageInfo({src: tempFilePaths,success (res) {that.data.canvas_arr.show = truethat.data.cutting.show = truethat.data.cutting.height = that.data.canvas_arr.width / 2var 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 : heightthat.data.cutting.max_y = that.data.canvas_arr.height - that.data.cutting.heightthat.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.startYif(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 = thisvar canvas_img = wx.createCanvasContext('myCanvas')canvas_img.width = that.data.canvas_arr.widthcanvas_img.height = that.data.canvas_arr.heightcanvas_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})}}); }))},})

功能主要针对轮播图片尺寸，不合适可自行修改比例
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。