我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

微信小程序裁剪头像插件使用方法详解

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

微信小程序裁剪头像插件使用方法详解

本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码，供大家参考，具体内容如下

用户上传头像，需要裁剪成正方形，结合在网上找到裁剪图片方法，封装为微信小程序组件。调用很方便。

参数介绍：

  • image_url：需要裁剪的图片链接
  • showCutImage：是否显示裁剪图片组件

wxml调用：

<cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl"  wx:if="{{showCutImage}}" >
</cutImage>

js调用：

returnImageUrl: function (e) {
    //e.detail.imageUrl,e.detail.showCutImage  
}

wxml代码：

<view class='fixed-upimg'>
  <view class="wx-content-info" >
    <view class="iamge-box" style="width:100%;height:{{imageBoxHeight}}px;">
      <image style="height:{{imageHeight}}px;width:{{imageWidth}}px;" class="lazy" data-src="{{imageUrl}}"></image>
      <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}px;height:{{cutH}}px;left:{{cutL}}px;top:{{cutT}}px">
        <view class="wx-cropper-view-box">
          <view class="wx-cropper-dashed-h"></view>
          <view class="wx-cropper-dashed-v"></view>
          <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
          <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
          <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
          <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
        </view>
      </view>
    </view>
    <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}px;height:{{imageH}}px;top:-9999px;left:-9999px;"></canvas>
    <view  class='button-tjtp' bindtap="getImageInfo" style="position:fixed;bottom:0rpx;"> 提交图片 </view>
  </view>
</view>

wxss代码：

.button-tjtp{
  width: 300rpx;
  height: 45px;
  border-radius: 50rpx;
  color: #151D37;
  background-color: #fff;
  margin: 20px 225rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-upimg{
    position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 9999;
}
.wx-content-info{
  position: fixed;
  top: 0rpx;
  left: 0;
  right: 0;
  bottom: 0;
 
}
.iamge-box{
  display: flex;
  justify-content: center;
  align-items: center;
}


.wx-corpper-crop-box{
    position: absolute;
    width: 500rpx;
    height: 500rpx;
    background: rgba(255,255,255,0.3);
    z-index: 2;
}
.wx-cropper-view-box {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    outline: 1px solid #69f;
    outline-color: rgba(102, 153, 255, .75)
}
 

.wx-cropper-dashed-h{
    position: absolute;
    top: 33.33333333%;
    left: 0;
    width: 100%;
    height: 33.33333333%;
    border-top: 1px dashed rgba(255,255,255,0.5);
    border-bottom: 1px dashed rgba(255,255,255,0.5);
}
 

.wx-cropper-dashed-v{
    position: absolute;
    left: 33.33333333%;
    top: 0;
    width: 33.33333333%;
    height: 100%;
    border-left: 1px dashed rgba(255,255,255,0.5);
    border-right: 1px dashed rgba(255,255,255,0.5);
}
 

.wx-cropper-line-t{
    position: absolute;
    display: block;
    width: 100%;
    background-color: #69f;
    top: 0;
    left: 0;
    height: 1px;
    opacity: 0.1;
    cursor: n-resize;
}
 
.wx-cropper-line-t::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0rpx;
  width: 100%;
  -webkit-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  bottom: 0;
  height: 41rpx;
  background: transparent;
  z-index: 11;
}
 
.wx-cropper-line-r{
    position: absolute;
    display: block;
    background-color: #69f;
    top: 0;
    right: 0px;
    width: 1px;
    opacity: 0.1;
    height: 100%;
    cursor: e-resize;
}
.wx-cropper-line-r::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 41rpx;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  bottom: 0;
  height: 100%;
  background: transparent;
  z-index: 11;
}
 
.wx-cropper-line-b{
    position: absolute;
    display: block;
    width: 100%;
    background-color: #69f;
    bottom: 0;
    left: 0;
    height: 1px;
    opacity: 0.1;
    cursor: s-resize;
}
 
.wx-cropper-line-b::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0rpx;
  width: 100%;
  -webkit-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  bottom: 0;
  height: 41rpx;
  background: transparent;
  z-index: 11;
}
 
.wx-cropper-line-l{
    position: absolute;
    display: block;
    background-color: #69f;
    top: 0;
    left: 0;
    width: 1px;
    opacity: 0.1;
    height: 100%;
    cursor: w-resize;
}
.wx-cropper-line-l::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 41rpx;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  bottom: 0;
  height: 100%;
  background: transparent;
  z-index: 11;
}
 
.wx-cropper-point{
    width: 5px;
    height: 5px;
    background-color: #69f;
    opacity: .75;
    position: absolute;
    z-index: 3;
}
 
.point-t{
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize;
}
 
.point-tr{
    top: -3px;
    left: 100%;
    margin-left: -3px;
    cursor: n-resize;
}
 
.point-r{
    top: 50%;
    left:100%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}
 
.point-rb{
    left: 100%;
    top: 100%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    cursor: n-resize;
    width: 24rpx;
    height: 24rpx;
    background-color: #69f;
    position: absolute;
    z-index: 1112;
    opacity: 1;
}
 
.point-b{
    left:50%;
    top: 100%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}
 
.point-bl{
    left:0%;
    top: 100%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}
 
.point-l{
    left:0%;
    top: 50%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}
 
.point-lt{
    left:0%;
    top: 0%;
    margin-left: -3px;
    margin-top: -3px;
    cursor: n-resize;
}
 

.wx-cropper-viewer{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 
.wx-cropper-viewer image{
  position: absolute;
  z-index: 2;
}

js代码：

var pageX = 0
// 拖动时候的 pageY
var pageY = 0
// 移动时 手势位移与 实际元素位移的比
var dragScaleP = 2
var pixelRatio = wx.getSystemInfoSync().pixelRatio
Component({
  
  properties: {
    imageUrl:{
      type:String,
      value:''
    }
  },

  
  data: {
    imageBoxHeight:0,
    windowWidth: 0,
    imageUrl:''
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
      this.getSysInfo();
      this.getImageDetail();
    },
  },
  created: function () {
    this.getSysInfo();
  },
  
  methods: {
    // 获取设备信息
    getSysInfo () { 
      wx.getSystemInfo({
        success: (res) => {
          console.log(res)
          this.setData({
            imageBoxHeight: res.windowHeight - 85,
            windowWidth: res.windowWidth
          })
        },
      })
    },
    getImageDetail(){
      wx.getImageInfo({
        class="lazy" data-src: this.data.imageUrl,
        success: (res) => {
          this.setData({
            imageW: res.width / 2,
            imageH: res.height / 2
          })
          if (res.width >= res.height) {
            var h = (res.height * this.data.windowWidth) / res.width;
            this.setData({
              imageWidth: this.data.windowWidth,
              imageHeight: h,
              cutW: h,
              cutH: h,
              cutL: (this.data.windowWidth - h) / 2,
              cutT: (this.data.imageBoxHeight - h) / 2
            })
          } else {
            var w = (this.data.imageBoxHeight * res.width) / res.height;
            this.setData({
              imageWidth: w,
              imageHeight: this.data.imageBoxHeight,
              cutW: w,
              cutH: w,
              cutL: (this.data.windowWidth - w) / 2,
              cutT: (this.data.imageBoxHeight - w) / 2
            })
          }
        }
      })
    },
    // 拖动时候触发的touchMove事件
    contentMoveing(e) {
      var _this = this
      // _this.data.cutL + (e.touches[0].pageX - pageX)
      // console.log(e.touches[0].pageX)
      // console.log(e.touches[0].pageX - pageX)

      var dragLengthX = (pageX - e.touches[0].pageX)
      var dragLengthY = (pageY - e.touches[0].pageY)
      var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
      var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
      var maxX = _this.data.imageWidth - _this.data.cutW
      var maxY = _this.data.imageHeight - _this.data.cutH
      if (_this.data.imageWidth == _this.data.cutW) {
        this.setData({
          cutT: Math.min(maxY, minY),
        })
      } else if (_this.data.imageHeight == _this.data.cutH) {
        this.setData({
          cutL: Math.min(maxX, minX)
        })
      }
      console.log(`${maxX} ----- ${minX}`)
      pageX = e.touches[0].pageX
      pageY = e.touches[0].pageY
    },
    // 拖动时候触发的touchStart事件
    contentStartMove(e) {
      pageX = e.touches[0].pageX
      pageY = e.touches[0].pageY
    },
    // 裁剪图片
    getImageInfo() {
      var _this = this
      console.log('shengcheng:' + _this.data.imageUrl)
      wx.showLoading({
        title: '图片生成中...',
      })
      // wx.downloadFile({
      //   url:_this.data.imageclass="lazy" data-src, //仅为示例，并非真实的资源     
      //   success: function (res) {
      // 将图片写入画布             
      const ctx = wx.createCanvasContext('myCanvas', _this)
      // ctx.drawImage(res.tempFilePath)
      ctx.drawImage(_this.data.imageUrl, 0, 0, _this.data.imageW, _this.data.imageH)

      ctx.draw(true, () => {
        // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
        var canvasW = (_this.data.cutW / _this.data.imageWidth) * (_this.data.imageW)
        var canvasH = (_this.data.cutH / _this.data.imageHeight) * (_this.data.imageH)
        var canvasL, canvasT;
        if (_this.data.imageHeight == _this.data.imageBoxHeight) {
          canvasL = (0 / _this.data.imageWidth) * (_this.data.imageW)
        } else {
          canvasL = (_this.data.cutL / _this.data.imageWidth) * (_this.data.imageW)
        }
        if (_this.data.imageWidth == _this.data.windowWidth) {
          canvasT = (0 / _this.data.imageHeight) * (_this.data.imageH)
        } else {
          canvasT = (_this.data.cutT / _this.data.imageHeight) * (_this.data.imageH)
        }
        console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW}  ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)

        wx.canvasToTempFilePath({
          x: canvasL,
          y: canvasT,
          width: canvasW,
          height: canvasH,
          destWidth: canvasW,
          destHeight: canvasH,
          canvasId: 'myCanvas',
          success: function (res) {
            // 成功获得地址的地方
            var tempFilePath = res.tempFilePath;
            wx.hideLoading()
            _this.returnImageUrl(tempFilePath)
            

          },
          fail: function (res) {
            console.log(res)
            wx.hideLoading()
            wx.showModal({
              content: '抱歉，图片上传失败！图片过大可能导致图片上传失败！',
              showCancel: false,
              confirmText: '我知道了',
              confirmColor: "#151D37",
              success: function (res) {
                if (res.confirm) {
                  _this.setData({
                    imageFixed: false,
                    tempFilePath: res.tempFilePath
                  })
                }
              }
            })
          }
        }, _this)
      })
    },
    returnImageUrl: function (url) {
      this.triggerEvent('returnImageUrl', {
        imageUrl: url,
        showCutImage:false
      })
    }
  }
})

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

微信小程序裁剪头像插件使用方法详解

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

微信小程序裁剪头像插件使用方法详解

2024-04-02

微信小程序裁剪头像插件如何使用

这篇文章主要介绍“微信小程序裁剪头像插件如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序裁剪头像插件如何使用”文章能帮助大家解决问题。用户上传头像，需要裁剪成正方形，结合在网上找到裁
2023-06-30

微信小程序map地图使用方法详解

2024-04-02

微信小程序swiper轮播图组件使用方法详解

2024-04-02

微信小程序弹窗组件使用详解

2024-04-02

微信小程序复选框组件使用详解

2024-04-02

微信小程序全局文件的使用详解

在小程序开发时，每个页面都对应一个目录，每个目录又分别有wxml、wxss、js和json四个文件。详细说明可查看后续文章介绍，本文主要详解全局文件
2022-11-13

微信小程序获取头像和昵称的最新方法(直接用!)

微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了,下面这篇文章主要给大家介绍了关于微信小程序获取头像和昵称的最新方法,本文介绍的方法可以直接拿来用,需要的朋友可以参考下
2023-05-18

微信小程序最新获取头像和昵称的方法 直接用！

2023-09-04

微信小程序填写用户头像和昵称实现方法浅析

这篇文章主要介绍了微信小程序填写用户头像和昵称实现方法，我们使用小程序往往能碰到提示允许获取用户头像昵称，这种功能怎么实现呢？本篇文章带你探索
2023-02-09

微信小程序下拉框组件使用方法

2024-04-02

微信小程序常用表单组件的使用详解

2024-04-02

【微信小程序】常用组件及基本使用详解

🖐本节学习目标： ✅学会使用常用的组件 文章目录 1.常用的容器类组件的使用1.view组件的基本使用2.scroll-view组件的基本使用3.swiper和swiper-item组件的基本使用 2.常用的
2023-08-17

微信小程序登录获取不到头像和昵称的详细解决办法

相信好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时却获取不到,下面这篇文章主要给大家介绍了关于微信小程序登录获取不到头像和昵称的详细解决办法,需要的朋友可以参考下
2022-12-28

微信小程序获取用户openid的方法详解

2024-04-02

关于微信小程序授权后，昵称是“微信用户”，头像是灰色的解决方案

2023-08-31

微信小程序常用视图容器组件使用详解

2024-04-02

微信小程序使用扩展组件库WeUI的方法

本篇内容介绍了“微信小程序使用扩展组件库WeUI的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. 学习参考2.NodeJs初始化这里
2023-06-30

【微信小程序开发】一文带你详解小程序组件和 API 的使用

引言 在小程序开发中，组件和API是非常重要的部分，它们可以帮助我们构建丰富的用户界面和实现各种功能。本文将介绍小程序中常用的组件和API，并提供相应的代码示例。 文章目录 引言组件文本组件图片组件按钮组件输入框组件列表组件
2023-08-20

如何在微信小程序中使用less详解(最优方式)

2024-04-02

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈