wepy2.x使用image-cropper裁剪图片

wepy2.x使用image-cropper

wepy2.x引入和wepy1.x引入有区别,wepy2.x使用小程序原生的方法引入,wepy1.x可使用npm直接安装插件.这里只介绍wepy2.x中使用image-cropper裁剪图片的方法;wepy1.x请参考: wepy1.x中使用image-cropper插件

效果: 裁剪效果

实操

1. 下载image-cropper插件; 插件地址: image-cropper插件; 地址中有详情介绍和使用方法;使用git下载原生组件

2. 将下载文件夹中的src文件复制到项目的公共组件目录(components)下,然后在使用的文件夹中引入

<!--父组件-->
<!-- 裁剪 -->
<template>
	<view class="form_img"  @click="updateTVClick">
          <text class="text mar-tb-16">添加图片</text>
     </view>
	<cropper 
		v-if="cropperUrl"
		:src="cropperUrl"
		@imgclose="imgCloseClick"
		@update="updateClick"
	/>
</template>
<config>
  {
    usingComponents: {
      "cropper": "./cropper"
    }
  }
</config>
<script>
import wepy from '@wepy/core';
import userController from "../../../services/userController.js";  // 封装的上传图片的api(这里要替换成你的api)
let that
wepy.page({
data: {
	cropperUrl: ' ',  // 裁剪的图片,用于父子页面传值和控制裁剪的显隐
	imgList: [ ], // 保存裁剪后的图片
},
methods: {
	/**
     * 上传图
     */
    updateTVClick() {
      let that = this
      wx.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'],
        success: function (res) {
          let tempFilePaths = res.tempFilePaths
          that.cropperUrl = tempFilePaths[0]
          console.log('this.cropperUrl: ', that.cropperUrl);
        }
      })
    },
    /**
     * 取消裁剪
     */
    imgCloseClick() {
      console.log('取消裁剪')
      this.$wx.setData({
        cropperUrl: ''
      })
    },

    /**
     * 确认裁剪
     */
    updateClick(url) {
      console.log('url: ', url);
      wx.showLoading({
        title: '上传中'
      })
      userController.unLoadFile(url, 1).then((res) => { // 你上传图片的api,这里封装了,请自行改成你的上传图片的api方法
        wx.hideLoading()
        this.$wx.setData({
          cropperUrl: '' // 关闭裁剪弹窗
        })
        that.imgList.push(res.data) // 保存裁剪的图片
      })
      .catch((error) => {
        wx.hideLoading()
        console.log('上传失败', error)
      });
    },
}

})
</script>

<!--子组件 cropper -->
<template>
  <!-- 图片裁剪 -->
  <view class="cropper_wrap">
    <image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{false}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>
    <view class="button">
      <view class="button_icon" @click="closeClick"><van-icon name="cross" /></view>
      <view class="button_icon" @click="rotateClick"><van-icon name="replay" /></view>
      <view class="button_reset" @click="resetClick">还原</view>
      <view class="button_icon" @click="confirmClick"><van-icon name="success" /></view>
    </view>
  </view>
</template>
<config>
  {
    usingComponents: {
      "van-icon": "~@/components/vant/icon/index",
      "image-cropper": "~@/components/image-cropper/image-cropper"
    }
  }
</config>
<script>
import wepy from '@wepy/core';
let that
wepy.component({
  props: {
    src: String,
  },
  options: {
    addGlobalClass: true,
  },
  data: {
    width:250,//宽度
    height: 250,//高度
  },
  created() {
    that = this
  },
  attached() {
    //获取到image-cropper实例
    this.cropper = this.$wx.selectComponent("#image-cropper");
    //开始裁剪
    wx.showLoading({
      title: '加载中'
    })
  },
  methods: {
    cropperload(e){
      console.log("cropper初始化完成");
    },
    loadimage(e){
      console.log("图片加载完成",e.$wx.detail);
      wx.hideLoading();
      //重置图片角度、缩放、位置
      this.cropper.imgReset();
    },
    clickcut(e) {
      console.log(e);
      //点击裁剪框阅览图片
      wx.previewImage({
        current: e.$wx.detail.url, // 当前显示图片的http链接
        urls: [e.$wx.detail.url] // 需要预览的图片http链接列表
      })
    },

    /**
     * 取消
     */
    closeClick() {
      this.$emit('imgclose')
    },

    /**
     * 旋转
     */
    rotateClick() {
      //在用户旋转的基础上旋转90°
      this.cropper.setAngle(this.cropper.data.angle += 90);
    },

    /**
     * 还原
     */
    resetClick() {
      this.cropper.imgReset();
    },

    /**
     * 确认
     */
    confirmClick() {
      this.cropper.getImg((obj) => {
        console.log('obj: ', obj);
        this.$emit('update', obj.url)
      });
    },


  }
})
</script>
<style lang="less">
.cropper_wrap {
  position: relative;
}
.button {
  z-index: 9999999;
  position: fixed;
  bottom: 60rpx;
  left: 0;
  right: 0;
  height: 96rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.button .button_reset {
  color: #fff;
}
.button .button_icon {
  color: #fff;
  font-size: 50rpx;
}
</style>

/**
* userController.js
* 上传文件组件封装 
1图标，2图片，3语音，4视频，5文件
*
*/
const unLoadFile = (dataurl, type) => {
    return new Promise((resolve, reject) => {
        let url = buildConf.api + '/api/file/upload';  // 你的请求地址
        wx.uploadFile({
            url: url, //仅为示例，非真实的接口地址
            filePath: dataurl,
            name: 'file',
            formData: {
                'type': type
            },
            header:{
                Authorization:Token.getToken()
            },
            success(res) {
                const data = JSON.parse(res.data);
                if(data.code==200){
                    resolve(data);
                }else{
                    reject(data);
                }
            },
            fail(error){
                reject({
                    message:"网络错误"
                });
            }
        })
    })
}