ifmiss / wx-cropper

:scissors: 微信小程序 图片裁剪工具，简单易用

wx-cropper

基于原生的微信小程序的裁剪组件

引入

支持npm包管理的模式项目目录下执行

npm i @dw/wx-cropper

也可以直接使用项目中的wx-cropper文件夹的文件，放到自己的项目中去

使用

在使用的页面的.json文件中注册

{
  "usingComponents": {
    "my-cropper": "@dw/wx-cropper"
  }
}

注册之后在使用的wxml的文件中引入该组件

<my-cropper
  bind:close="hideCut"
  cutRatio="{{cutRatio}}"
  wx:if="{{showCropper}}"
  imageSrc="{{imageSrc}}"
  cropperRatio={{cropperRatio}}
  cropperWidth={{cropperWidth}}
  minCropperW={{minCropperW}}/>

参数配置

close: 事件 参数为img, 在点击关闭的时候没有这个参数，只有在生成图片的时候才有

  path: string;
  width: number;
  height: number;

hideCut () {
  this.setData({
    showCropper: false
  })
  const img = arguments[0].detail
  if (img && img.path) {
    console.log(img)
    this.setData({
      imageInfo: img
    })
  }
}

cutRatio 初始化的裁剪比例

/**
 * @type         number
 * @description  初始化的裁剪比例
 * @example 0    默认初始化的裁剪区域宽高为图片的宽高，且裁剪比例不固定
 * @example 0.5  宽高比例固定，且宽和高的比例为 1 : 2 的比例
 * @example 2    宽高比例固定，且宽和高的比例为 2 : 1 的比例
 */

cropperRatio 组件裁剪显示区域的最大比例

/**
 * @type         number
 * @description  组件裁剪显示区域的最大比例，如果裁剪的图片过长，则做限制，默认最大宽高比例为 宽640 / 高960 (宽高比例)
 * @example 1    如果CROPPER_WIDTH宽度是720px，那么裁剪区域的高度也就是 CROPPER_WIDTH / cropperRatio 为 720px;
 */

imageSrc 需要裁剪的图片地址 支持本地和线上

cropperWidth 裁剪区域的宽度 默认720 居中显示

minCropperW 裁剪区域最小宽度， 如果是等比例 按照最短的计算

裁剪区域固定宽高

不固定比例