safety-eval-service-frontend/.cursor/skills/specs/10-通用业务组件使用规范/06-图片裁剪组件/SKILL.md

name	description
jjb-image-cropper	定义 JJB 图片裁剪组件使用规范。在使用 ImageCropper、toDataFile、toDataURL 时使用。必须参考 MD/d.ts 文档。

通用业务组件使用规范

图片裁剪组件

⚠️ 重要约束：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

使用

import ImageCropper from '@cqsjjb/jjb-react-admin-component/ImageCropper'

代码演示

import React, { useState, useRef } from 'react';
import { Button } from 'antd';
import ImageCropper from '@cqsjjb/jjb-react-admin-component/ImageCropper';

function App() {
  const cropper = useRef();
  const [ resource, setResource ] = useState();
  const onUpload = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.click();
    input.onchange = e => {
      setResource(e.target.files[ 0 ]);
    };
  };

  const onCropper = () => {
    console.log(cropper.current.toDataFile());
  };
  return (
    <>
      <Button onClick={onUpload}>
        上传文件
      </Button>
      <Button onClick={onCropper}>
        获取裁剪后的图片
      </Button>
      <ImageCropper
        ref={cropper}
        resource={resource}
      />
    </>
  );
}

API

属性	说明	类型	默认值
width	宽度	number	400
height	高度	number	400
locked	是否锁定裁剪框大小	boolean	false
aspect	裁剪框宽高比	number	16 / 9
resource	裁剪的资源，文件对象或base64	File | string	-
ref	裁剪实例	React.Ref<ImageCropperRef>	-

ImageCropperRef 裁剪实例

属性	说明	类型	默认值
toDataURL	转换为dataURL	(quality?: number) => ToDataURLResult	-
toDataFile	转换为dataFile	() => ToDataFileResult	-
toBlobURL	转换为blobURL	() => string	-
toDataImageText	转换为dataImageText	() => string	-
toDataImageInstance	转换为dataImageInstance	() => Promise<ToDataImageInstanceResult>	-

ToDataURLResult

属性	说明	类型	默认值
md5	文件MD5	string	-
base64	base64	string	-

ToDataFileResult

属性	说明	类型	默认值
md5	文件MD5	string	-
file	文件对象	File	-

ToDataImageInstanceResult

属性	说明	类型	默认值
src	文件资源	string	-
width	宽度	number	-
height	高度	number	-
instance	实例	HTMLImageElement	-