欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)裁剪圖片大小

 更新時間:2022年05月23日 17:12:55   作者:換日線°  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)裁剪圖片大小,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)裁剪圖片大小的具體代碼,供大家參考,具體內(nèi)容如下

效果圖

.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
? ? ? ? ? })
? ? ? ? }
? ? ? });
? ? }))
? },
})

功能主要針對輪播圖片尺寸,不合適可自行修改比例

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript中的閉包原理分析

    JavaScript中的閉包原理分析

    一看到閉包這個詞,我就會想起線性代數(shù)中的封閉空間,也就是說,這個空間中的所有向量,無論經(jīng)過何種運算,最終結(jié)果還是會落在該空間中。那么JavaScript中會不會也是類似的概念呢?
    2010-03-03
  • javascript手風(fēng)琴下拉菜單實現(xiàn)代碼

    javascript手風(fēng)琴下拉菜單實現(xiàn)代碼

    手風(fēng)琴效果的下拉菜單大家都有見到過吧,實現(xiàn)的方法也有很多,這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實現(xiàn)代碼,純手寫的,感興趣的朋友不要錯過。
    2015-11-11
  • js 代碼集(學(xué)習(xí)js的朋友可以看下)

    js 代碼集(學(xué)習(xí)js的朋友可以看下)

    js 代碼集 學(xué)習(xí)js的朋友可以看下,功能比較多,大家可以自己選擇。
    2009-07-07
  • js 調(diào)整select 位置的函數(shù)

    js 調(diào)整select 位置的函數(shù)

    js 調(diào)整select 位置的函數(shù),向上移動,向下移動,移動到最上,移動到最后 這里把項目中寫過的幾個js函數(shù)來給大家分享,功能是通過js來實現(xiàn)對select 中的option的位置進行移動,代碼如下
    2008-02-02
  • JavaScript中Webpack的使用教程

    JavaScript中Webpack的使用教程

    Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析,然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源,這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下
    2021-10-10
  • JavaScript中ES6字符串?dāng)U展方法

    JavaScript中ES6字符串?dāng)U展方法

    這篇文章主要介紹了JavaScript中ES6字符串?dāng)U展方法的相關(guān)資料,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧
    2016-08-08
  • js簡單遍歷獲取對象中的屬性值的方法示例

    js簡單遍歷獲取對象中的屬性值的方法示例

    這篇文章主要介紹了js簡單遍歷獲取對象中的屬性值的方法,涉及javascript使用for循環(huán)遍歷json對象屬性值的簡單操作技巧,需要的朋友可以參考下
    2019-06-06
  • js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別詳解

    js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別詳解

    本文是對js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • JS獲取網(wǎng)頁屬性包括寬、高等等

    JS獲取網(wǎng)頁屬性包括寬、高等等

    這篇文章主要介紹了JS獲取網(wǎng)頁屬性包括寬、高等等,需要的朋友可以參考下
    2014-04-04
  • 淺談JS三座大山之異步和單線程

    淺談JS三座大山之異步和單線程

    首先我們要知道,js這門語言是單線程的,同時只能做一件事,比如說渲染dom,執(zhí)行js方法,這些事情只能一個一個做,不能分開執(zhí)行。(因為js需要操作dom,當(dāng)兩個js方法同時操作一個dom的時候就會出問題,所以js被設(shè)計成了單線程)。本文將介紹JS三座大山之異步和單線程。
    2021-06-06

最新評論