微信小程序實現(xiàn)裁剪圖片大小
更新時間:2022年05月23日 17:12:55 作者:換日線°
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)裁剪圖片大小,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)裁剪圖片大小的具體代碼,供大家參考,具體內容如下
效果圖
.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 ? ? ? ? ? }) ? ? ? ? } ? ? ? }); ? ? })) ? }, })
功能主要針對輪播圖片尺寸,不合適可自行修改比例
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別詳解
本文是對js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11