ImgCropper 图片裁剪

1、图片裁剪
2、支持拖拽，用于移动图片使其位于对应位置
3、支持缩放，用于截取限定区域
4、支持旋转，用于截取对应角度

基本用法

图片裁剪组件需要绑定 show 来控制组件的显示与隐藏，通过属性 img-src 控制展示的图片资源位，也可以通过函数 resetImg 来控制组件图片的初始化。进入组件后，可以对图片进行拖拽、双指缩放、旋转等操作。监听 bind:confirm 事件获取选中值。

注意：在使用组件时，最好在一个新页面中使用图片裁剪组件，图片裁剪保持show为true，完成裁剪时，返回上一页。

<wd-img-cropper
  show="{{show}}"
  img-src="{{src}}"
  bind:confirm="handleConfirm"
  bind:cancel="handleCancel"
</wd-img-cropper>
<view class="profile">
  <view jd:if="{{ !imgSrc }}" class="img" bindtap="upload">
    <wd-icon name="fill-camera" custom-class="img-icon"></wd-icon>
  </view>
  <wd-img jd:if="{{ imgSrc }}" round width="200px" height="200px" src="{{ imgSrc }}" mode="aspectFit" custom-class="profile-img" bindtap="upload" />
  <view style="font-size: 14px;">点击上传头像</view>
</view>

Page({
  data: {
    src: '',
    imgSrc: '',
    show: false
  },
  upload () {
    const that = this
    jd.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        const tempFilePaths = res.tempFilePaths[0]
        that.setData({
          show: true,
          src: tempFilePaths
        })
      }
    })
  },
  handleConfirm (event) {
    const { tempFilePath } = event.detail
    // 使用 jd.uploadFile 上传文件
    this.setData({
      imgSrc: tempFilePath
    })
  },
  handleCancel (event) {
    console.log('取消', event)
  }
})

Attributes

参数	说明	类型	可选值	默认值	最低版本
show	打开图片裁剪组件	boolean	-	false	2.3.0
img-src	图片资源链接	string	-	-	2.3.0
img-width	截屏预览图片的初始宽度; `1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px	number / string	-	-	2.3.0
img-height	截屏预览图片的初始高度; `1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px	number / string	-	-	2.3.0
disabled-rotate	禁止图片旋转	boolean	-	false	2.3.0
export-scale	设置导出图片尺寸	number	-	2	2.3.0
max-scale	最大缩放倍数	number	-	3	2.3.0
cancel-button-text	取消按钮文案	string	-	取消	2.3.0
confirm-button-text	确认按钮文案	string	-	完成	2.3.0
quality	生成的图片质量 wx.canvasToTempFilePath属性介绍	number	0/1	1	2.3.0
file-type	目标文件的类型，wx.canvasToTempFilePath属性介绍	string	-	png	2.3.0

Events

事件名称	说明	参数	最低版本
bind:confirm	完成截图时触发	event.detail = {tempFilePath, width, height} 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高	2.3.0
bind:cancel	当取消截图时触发	-	2.3.0
bind:imgloaderror	当图片加载错误时触发	event.detail = {err}	2.3.0
bind:imgloaded	当图片加载完成时触发	event.detail = {res}	2.3.0

Methods

对外暴露函数

事件名称	说明	参数	最低版本
setRoate	设置图片旋转角度	deg (设置的旋转角度)	2.3.0
resetImg	重置图片的角度、缩放、位置	-	2.3.0

外部样式类

类名	说明	最低版本
custom-class	根结点样式	2.3.0

4.4 KiB Raw Blame History Unescape Escape

ImgCropper 图片裁剪

基本用法

Attributes

Events

Methods

外部样式类

4.4 KiB

Raw Blame History