react-crop-vx

这是一款仿微信的 react 裁剪组件，裁剪模式：除了可等比拉伸裁剪，还可以垂直、水平拉伸裁剪，操作性更强；裁剪形状：支持矩形和圆形，后续将支持更多形状✌。

下载安装

npm i react-crop-vx --save

快速使用

import React from "react";
import Crop from "react-crop-vx";

const src = "http://baidu.com/img1.jpg"; // 无效url


function complete(res){
  console.log(res)
}

// 矩形列子
const crop1 = {
  width:50,
  height:50,
  x:30,
  y:30
};

function rectCrop (){
  return
    <Crop src={src} crop={crop1} onComplete={complete} />

}

// 圆形例子
const crop2 = {
  radius：50,
  x:30,
  y:30
};

function circleCrop (){
  return
    <Crop src={src} crop={crop2} onComplete={complete} circleClip />

}

// 其他例子
const crop = {
  radius：50,
  x:30,
  y:30
};

const style =  {
  width: 550,
  height: 314, // 目前该参数无效，以width为准
},

function Cropper (){
  return (
    <div style={{transform:'scale(0.5,0.5)' }}>
      <Crop
        src={src} 
        crop={crop} 
        onComplete={complete} 
        style={style} 
        minWidth={50}
        minHeight={50} 
        isBoundary 
        transform={{ scaleX: 0.5, scaleY: 0.5 }} // 需配合外层css transform时使用
      />
    </div>
  );
}

参数说明

| 参数 | 必填 | 默认值 | 类型 | 说明 | | ---------- | :--: | :----------------------: | -------- | -------------------------------------------------------------------------------- | | src | 是 | null | String | 裁剪图片地址 | | crop | 是 | null | Object | 裁剪参数,详见下方 crop | | circleClip | 否 | false | Boolean | 当 circleClip 为 true 时，代表圆形裁剪，false 为矩形裁剪 | | isBoundary | 否 | false | Boolean | 当 isBoundary 为 true 时，限制裁剪框在图片内，不超出图片边界，false 则不限制边界 | | minWidth | 否 | 0 | Number | 设置允许裁剪框的最小宽度 | | minHeight | 否 | 0 | Number | 设置允许裁剪框的最小高度 | | style | 否 | 原图的宽度和高度 | Object | 为了保持图片不变形，目前只可修改 width 来控制，height无效 | | transform | 否 | { scaleX: 1, scaleY: 1 } | Object | css transform 控制组件时保持一致的方法，具体见下方特别说明 | | onComplete | 是 | null | Function | 裁剪完成的回调函数，返回相关裁剪信息 |

特别说明：transform：当图片过大，通过 transform 缩放整个组件时，拖拽和缩放元素速度会有影响，应设置 transform 属性与你组件外层样式属性一致；

crop(矩形)

| crop 参数 | 必填 | 默认值 | 类型 | 说明 | | --------- | :--: | :----: | ------ | ----------------------------- | | width | 是 | null | Number | 裁剪框的宽 | | height | 是 | null | Number | 裁剪框的高 | | x | 是 | null | Number | 以裁剪框左上角为原点的 X 坐标 | | y | 是 | null | Number | 以裁剪框左上角为原点的 Y 坐标 |

crop(圆形)

| crop 参数 | 必填 | 默认值 | 类型 | 说明 | | --------- | :--: | :----: | ------ | ----------------------------- | | radius | 是 | null | Number | 裁剪框的半径 | | x | 是 | null | Number | 以裁剪框左上角为原点的 X 坐标 | | y | 是 | null | Number | 以裁剪框左上角为原点的 Y 坐标 |

onComplete(res)

| res 参数 | 类型 | 说明 | | -------- | ------ | ------------------------------- | | src | String | 裁剪后的图片地址 | | origin | Object | 原图的相关属性，详见下方 origin |

origin

| origin 参数 | 类型 | 说明 | | ----------- | ------ | ----------------------- | | src | String | 原图地址 | | x | Number | 裁剪框在图片中的 x 位置 | | y | Number | 裁剪框在图片中的 y 位置 | | width | Number | 裁剪框的宽 | | height | Number | 裁剪框的高 | | imgScaleRatio | Number | 图片相对于原图的缩放比例 |

注意事项

1.以上单位都是 px；

版本日志

v1.0.0

1.react 裁剪组件发布 react-crop-vx

v1.0.2

1.取消style内的transform改为计算实现；

v1.0.3

1.解决onComplete的参数等比计算；

v1.0.4

1.解决crop x y 为0时就报错问题；

v1.1.0

1.增加onComplete中imgScaleRatio参数；

2.去除onComplete的参数等比计算；

v1.1.1

1.修复imgScaleRatio参数错误问题；

2.去除默认裁剪；

讨论与交流 

目前因为项目原因制作了这一款裁剪组件，还在持续优化中...,欢迎大家一起讨论，如使用过程中遇到bug，或者有什么新的需求，欢迎告诉我，我会尽快优化，谢谢大家！

联系方式：[email protected] 