React-crop-vx NPM

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	图片相对于原图的缩放比例