ImageCrop 图片裁剪

裁剪图片

何时使用

裁剪图片

代码演示

基本

最简单的用法。

​
import ReactDOM from 'react-dom';
import { ImageCrop, Button } from 'choerodon-ui';
import React, { useState, useCallback } from 'react';
​
const Demo = () => {
  const [visable, setVisiable] = useState(false);
​
  const hanleClick = useCallback(() => {
    setVisiable(true);
  }, []);
​
  const hanleOk = useCallback(({ url, blob, area }) => {
    console.log(url, blob, area);
    setVisiable(false);
  }, []);
​
  const hanleCancel = useCallback(() => {
    setVisiable(false);
    console.log('close');
  }, []);
​
  return (
    <>
      <Button onClick={hanleClick} funcType="raised">
        查看
      </Button>
      <ImageCrop
        modalVisible={visable}

图片裁剪下载

图片裁剪下载。

​
import ReactDOM from 'react-dom';
import { ImageCrop, Button } from 'choerodon-ui';
import React, { useState, useCallback } from 'react';
​
const Demo = () => {
  const [visable, setVisiable] = useState(false);
​
  const hanleClick = useCallback(() => {
    setVisiable(true);
  }, []);
​
  const hanleOk = useCallback(({ url, blob, area }) => {
    console.log(url, blob, area);
    setVisiable(false);
    // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
    const imgUrl = url;
    // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
    if (window.navigator.msSaveOrOpenBlob) {
      const bstr = atob(imgUrl.split(',')[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      // eslint-disable-next-line no-plusplus
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      // eslint-disable-next-line no-shadow
      const blob = new Blob([u8arr]);
      window.navigator.msSaveOrOpenBlob(blob, 'chart-download.png');

头像展示

头像编辑。

​
import ReactDOM from 'react-dom';
import { ImageCrop, Avatar } from 'choerodon-ui';
import React, { useState, useCallback } from 'react';
​
const { AvatarUploader } = ImageCrop;
​
const Demo = () => {
  const [visable, setVisiable] = useState(false);
​
  const hanleClick = useCallback(() => {
    setVisiable(true);
  }, []);
​
  const hanleOk = useCallback(() => {
    setVisiable(false);
  }, []);
​
  const hanleCancel = useCallback(() => {
    setVisiable(false);
    console.log('close');
  }, []);
​
  return (
    <>
      <Avatar onClick={hanleClick} style={{ backgroundColor: '#87d068' }}>
        我绿了
      </Avatar>
      <AvatarUploader

图片裁剪并上传

图片裁剪并上传，不可以使用upload上传类型和上传前的钩子其他upload的配置可以正常使用。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Icon, Modal, ImageCrop, Upload } from 'choerodon-ui';
​
class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [
      {
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url:
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
    ],
  };
​
  handleCancel = () => this.setState({ previewVisible: false });
​
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
​

图片服务端裁剪

图片服务端裁剪，把完整的裁剪信息和原图传输到服务器。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Icon, Modal, ImageCrop, Upload } from 'choerodon-ui';
​
class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [
      {
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url:
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
    ],
  };
​
  handleCancel = () => this.setState({ previewVisible: false });
​
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
​

裁剪区域自定义渲染

支持在裁剪区域设置想要的渲染样式。

​
import ReactDOM from 'react-dom';
import { ImageCrop, Button, Row, Col, Avatar } from 'choerodon-ui';
import React, { useState, useCallback } from 'react';
​
const avatarRender = (src) => {
  const prefix = `c7n-image-crop`;
  const avatarList = [
    {
      src,
      size: 80,
      icon: 'person',
      text: '80×80',
    },
    {
      src,
      size: 40,
      icon: 'person',
      text: '40×40',
    },
    {
      src,
      size: 20,
      icon: 'person',
      text: '20×20',
    },
  ];
  return src
    ? avatarList.map(
        // eslint-disable-next-line react/jsx-key
        (itemProps) => (
          <Row
            key={itemProps.text}
            className={`${prefix}-avatar-row`}

API

ImgCrop.AvatarUploader

这个组件可以完成对于头像上传的裁剪的场景需求，主要是增加预览效果集成