扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序裁剪头像插件使用方法详解
  • 800

0
分享到

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

2024-04-02 19:04:59 800人浏览 安东尼
摘要

本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码，供大家参考，具体内容如下 用户上传头像，需要裁剪成正方形，结合在网上找到裁剪图片方法，封装为微信小程序组件。调用很方便。 参

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

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

参数介绍：

  • 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;" 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({
        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.imageSrc, //仅为示例，并非真实的资源     
      //   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
      })
    }
  }
})

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

--结束END--

本文标题: 微信小程序裁剪头像插件使用方法详解

本文链接: https://lsjlt.com/news/149584.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序裁剪头像插件使用方法详解
    本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码，供大家参考，具体内容如下 用户上传头像，需要裁剪成正方形，结合在网上找到裁剪图片方法，封装为微信小程序组件。调用很方便。 参...
    99+
    2024-04-02
  • 微信小程序裁剪头像插件如何使用
    这篇文章主要介绍“微信小程序裁剪头像插件如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序裁剪头像插件如何使用”文章能帮助大家解决问题。用户上传头像，需要裁剪成正方形，结合在网上找到裁...
    99+
    2023-06-30
  • 微信小程序获取头像open-type=“chooseAvatar“ bind:chooseavatar方法
    微信一直对获取头像和昵称一直很执着。抛弃了3个 open-type=“getUserInfo” 在2021年4月13日停用 wx.getUserInfo 在2021年4月28日停用 wx.get...
    99+
    2023-08-31
    微信小程序 小程序
  • 微信小程序map地图使用方法详解
    本文实例为大家分享了微信小程序map地图使用的具体实现代码，供大家参考，具体内容如下 以下代码是主要的代码片段 <!-- 地图部分 --> <!-- en...
    99+
    2024-04-02
  • 微信小程序swiper轮播图组件使用方法详解
    本文实例为大家分享了微信小程序swiper轮播图组件的使用，供大家参考，具体内容如下 在components中新建文件夹swiper components/swiper/swiper...
    99+
    2024-04-02
  • 微信小程序如何使用蓝牙小插件
    这篇文章主要介绍了微信小程序如何使用蓝牙小插件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下bluetooth.jsfuncti...
    99+
    2024-04-02
  • 微信小程序打包插件开发的方法
    今天小编给大家分享一下微信小程序打包插件开发的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。如果你看过文档，相信你一定知...
    99+
    2023-06-26
  • 微信小程序弹窗组件使用详解
    介绍 最近在开发小程序应用, 发现小程序当中有关于组件的介绍非常的少, 当前自己做的项目当中,有出现过这种情况, 所以自己就封装了一个小程序的弹窗组件, 现在把自己的心得分享给大家,...
    99+
    2024-04-02
  • uniapp微信小程序获取用户名和头像最新方式（头像填写）
    根据微信调整 getUserProfile 接口、getUserInfo 接口在最新的小程序基础库 已经不能获取到用户信息 官方推荐用头像填写能力 实现了一版 代码如下 做个记录 方便下次找到 昵称：保存export default {d...
    99+
    2023-08-17
    微信小程序 uni-app 小程序
  • 微信小程序最新获取头像昵称方式
      前言 版本历史变迁 一、获取头像的正确姿势 二、获取昵称的正确姿势 总结 前言 产品需要获取微信用户的昵称和头像。 这这还不简单，so easy！ 通过wx.getUserProfile或者 wx.getUserInfo 就可以...
    99+
    2023-08-31
    微信小程序
  • 微信小程序的视频插件怎么使用
    本篇内容主要讲解“微信小程序的视频插件怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序的视频插件怎么使用”吧!一、在小程序中引入插件。进入微信公众平台，在设置中找到第三方服务，在...
    99+
    2023-06-26
  • 微信小程序slot插槽的使用
    微信小程序中的插槽是一种组件化技术，可以帮助开发者创建复用性更高的组件。本文将详细介绍微信小程序中插槽的定义、用法、作用以及注意事项。 插槽的定义 插槽是指在组件中预留的一块区域，可以动态地替换成其他组件或内容。组件开发者在编写组件时...
    99+
    2023-08-19
    微信小程序 前端 小程序 javascript vue.js
  • 最新uniApp微信小程序获取头像open-type=“chooseAvatar“ @chooseavatar方法
    小程序用户头像昵称获取规则调整公告 调整说明 自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整： 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发...
    99+
    2023-09-02
    微信小程序 uni-app 小程序
  • 微信小程序全局文件的使用详解
    目录全局文件总结我们前边两篇介绍了账号的申请、注册，工具的安装，云服务的开通。本篇我们介绍一下基础语法。介绍的方法呢我们会结合上微搭低代码的工具一起做个对比。因为低代码工具也产生了非...
    99+
    2022-11-13
    微信小程序全局文件 小程序全局文件
  • 微信小程序复选框组件使用详解
    在工作中频繁用到复选框，于是自己写了个组件，增加其复用性，提高效率。先看效果图： 提交后得到一个选中项的id组成的数组 下边直接上代码： 代码地址为：components/chec...
    99+
    2024-04-02
  • 微信小程序最新获取头像和昵称的方法 直接用！
    调整背景 微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo，2021年4月5日被废弃，原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正...
    99+
    2023-09-04
    微信小程序 前端 Powered by 金山文档
  • 微信小程序获取头像和昵称的最新方法(直接用!)
    目录调整背景头像填写昵称填写代码示例总结调整背景 微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo，2021年4月5日被废弃，原因是很多开发者在打开小程序时就通...
    99+
    2023-05-18
    微信小程序获取头像和昵称怎么弄 怎么才能获取微信头像跟昵称 小程序获取用户头像昵称
  • 微信小程序填写用户头像和昵称实现方法浅析
    目录开放能力调整公告获取头像获取昵称获取昵称需要注意的地方开放能力调整公告 总体来说就是通过按钮来授权获取用户基础信息的能力都没啦（wx.getUserProfile，wx.getU...
    99+
    2023-02-09
    小程序填写用户头像 小程序填写用户昵称
  • 微信小程序日历插件怎么用
    这篇“微信小程序日历插件怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序日历插件怎么用”文章吧。属性如下：使用...
    99+
    2023-06-26
  • 微信小程序下拉框组件使用方法
    小程序有时需要使用下拉框选项，通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别，默认使用普通选择器就行。 除了上述方式，我们也可以通过自定义组件实现，代...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作