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

这篇文章主要介绍“微信小程序裁剪头像插件如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序裁剪头像插件如何使用”文章能帮助大家解决问题。

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

参数介绍：

• 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" >      <image  class="lazy" data-src="{{imageUrl}}"></image>      <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" >        <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" ></canvas>    <view  class='button-tjtp' bindtap="getImageInfo" > 提交图片 </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// 拖动时候的 pageYvar pageY = 0// 移动时 手势位移与 实际元素位移的比var dragScaleP = 2var pixelRatio = wx.getSystemInfoSync().pixelRatioComponent({    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      })    }  }})

关于“微信小程序裁剪头像插件如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。