微信小程序裁剪图片（上传头像裁剪）完整源码

最新推荐文章于 2024-08-08 08:30:02 发布

前端创新者

最新推荐文章于 2024-08-08 08:30:02 发布

阅读量735

点赞数 13

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/GDNLQ/article/details/137256231

版权

本文详细介绍了如何在微信小程序中使用`image-cropper`组件进行图片裁剪，包括解压资源、配置页面、调用API以及裁剪后保存的方法，提供关键代码片段供开发者参考。

摘要由CSDN通过智能技术生成

效果图（将下面的代码复制粘贴就可以做出来了）

第一步

将资源文件解压放到utils目录下

第二步

页面json配置文件引入组件

{
  "usingComponents": {
    "image-cropper": "/utils/image-cropper/image-cropper"
  }, 
  "navigationStyle":"custom"
}

第三步

页面使用

入参：

src:'' //原始文件路径（需要修改的文件）

width:250,//宽度

height: 250,//高度

<view>
  <image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut" ></image-cropper>
  <cover-view class='panel-foot' bindtap="submit" style="position: absolute;">
    <button class='panelBtn' catchtap='' style="z-index: 9999;">保存</button>
  </cover-view>
</view>

第四步

js文件写裁剪方法以及最后的保存

Page({
  /**
   * 页面的初始数据
   */
  data: {
    src:'',
    width:250,//宽度
    height: 250,//高度
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.path)
    //获取到image-cropper实例
          this.cropper = this.selectComponent("#image-cropper");
          //开始裁剪
          this.setData({
              src:app.globalData.resheadUrl+options.path,
          });
          wx.showLoading({
              title: '加载中'
          })
      },
      cropperload(e){
          console.log("cropper初始化完成");
      },
      loadimage(e){
          console.log("图片加载完成",e.detail);
          wx.hideLoading();
          //重置图片角度、缩放、位置
          this.cropper.imgReset();
      },
      clickcut(e) {
          //点击裁剪框阅览图片
          wx.previewImage({
              current: e.detail.url, // 当前显示图片的http链接
              urls: [e.detail.url] // 需要预览的图片http链接列表
          })
      },
      submit(e){
        this.cropper.getImg((obj) => {
          // 这里就是想要截取的图片传给后台的虚拟路径
          console.log(obj)
        })
      },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})