脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序裁剪图片大小

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

 更新时间：2022年05月23日 17:12:55   作者：换日线°  
这篇文章主要为大家详细介绍了微信小程序实现裁剪图片大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图

.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实现完美兼容各大浏览器的人民币大小写相互转换

    js实现完美兼容各大浏览器的人民币大小写相互转换

    在基于网页的打印输出或报表中，经常会牵扯到金额的大写，每次都打上去很麻烦，所以想法用一个JavaScript客户端脚本来实现自动转换，只需在需要显示大写金额的时候调用该JS函数，下面我们就来汇总下吧
    2015-10-10
  • 基于javascript实现按圆形排列DIV元素(一)

    基于javascript实现按圆形排列DIV元素(一)

    本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法，此文着重于介绍对实现的按圆形排列DIV元素的分析，需要的朋友来看下吧
    2016-12-12
  • 利用jsonp与代理服务器方案解决跨域问题

    利用jsonp与代理服务器方案解决跨域问题

    这篇文章主要给大家介绍了关于利用jsonp与代理服务器方案解决跨域问题的相关资料，文中通过示例代码给大家介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • 选择器的朋友可以试试这个思路 延迟执行归并选择操作

    选择器的朋友可以试试这个思路 延迟执行归并选择操作

    因为通常选择器需要遍历整个元素树，所以当多次选择会比较耗时，忽然想到是否能利用setTimeout将多次选择操作归并到一起
    2011-01-01
  • 微信小程序嵌入H5页面(web-view)的方法详解

    微信小程序嵌入H5页面(web-view)的方法详解

    使用<web-view>标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的,下面这篇文章主要给大家介绍了关于微信小程序嵌入H5页面(web-view)的相关资料,需要的朋友可以参考下
    2022-09-09
  • javascript判断用户浏览器插件安装情况的代码

    javascript判断用户浏览器插件安装情况的代码

    javascript判断用户浏览器插件安装情况的代码，需要的朋友可以参考下。
    2011-01-01
  • 微信小程序仿知乎实现评论留言功能

    微信小程序仿知乎实现评论留言功能

    这篇文章主要为大家详细介绍了微信小程序仿知乎实现评论留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 微信小程序实现购物车选择规格颜色效果

    微信小程序实现购物车选择规格颜色效果

    这篇文章主要为大家详细介绍了微信小程序实现购物车选择规格颜色选中效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • javascript 运算数的求值顺序

    javascript 运算数的求值顺序

    请注意，这里说的是运算数的求值顺序。而非运算符，运算符的求值顺序我们比较熟悉。
    2011-08-08
  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    window.onload()方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。本文将用window.onload()打造黑客代码雨效果，感兴趣的可以尝试一下
    2022-06-06

最新评论