前端图片裁剪 react-image-crop

前端图片裁剪 react-image-crop

前端图片裁剪已经是很常见的需求了，在 react 的项目中推荐使用 react-image-crop 库，能勾勒出裁剪区域、宽高比例限制等等，但是还是有很多东西需要我们来做的，比如以下问题：

react-image-crop

react-image-crop 的基本使用

import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

const cropOnChange = (newCrop: any) => {};

const onImageLoaded = (image: any) => {};

<ReactCrop
  src={src}
  crop={crop}
  onChange={cropOnChange}
  onImageLoaded={onImageLoaded}
>
  {props.children}
</ReactCrop>;

限制图片的最小宽高

如果连展示位的最小宽高都不满足，那还裁剪什么

export function getImgSize(src: any, w: number, h: number): Promise<any> {
  return new Promise((resolve, reject) => {
    if (!src) return;
    const img = document.createElement("img");
    img.src = src;
    img.onload = function() {
      const { width, height } = img;
      if (width < w || height < h) {
        reject(`请上传宽大于${w}，高大于${h}的图片`);
        return;
      }
      resolve({ width, height, img });
    };
  });
}

原图按比例缩放

有的图片尺寸很大，但是我们要显示在一个屏幕之中，那么要采取原图按比例缩放，所以定高和定宽成了一个选择，那么会出现另一个问题，后面再说。

假设我们决定了定高：

const initImage = (image: any) => {
  const { width, height } = image;
  // 计算出现在高度和定高的比例
  let radio = height / config.imgMinWH.h;
  // 那么现在宽度值
  let cW = width / radio,
    cH = config.imgMinWH.h;
  if (width === 900) {
    cW = 900;
    radio = 1;
    let wRadio = cW / width;
    cH = height * wRadio;
  }
  // 设置image的宽高
  image.width = cW;
  image.height = cH;
  setScaleRadio(radio);
  setCrop({ ...crop, ...{ x: 0, y: 0, width: cW, unit: "px" } });
};

然后按照比例在原图上裁剪

裁剪的话使用 canvas 来裁剪，那么有个很重要的问题，就是图片的跨域问题，图片不在一个域下的话，使用 canvas 会污染画布，这个时候别急，将使用其他方法来解决这个问题，oss 的话开启图片的 get 操作即可

const canvas = document.createElement("canvas");
const ctx: any = canvas.getContext("2d");
const canvasImage = () => {
  const img = new Image();
  img.crossOrigin = "Anonymous";
  img.src = signatureUrl(props.src || "", false);
  common.showLoading();
  img.onload = function() {
    const { x, y, width, height } = crop;
    canvas.width = Math.floor(width * scaleRadio);
    canvas.height = Math.floor(height * scaleRadio);
    ctx.drawImage(
      img,
      Math.floor(x * scaleRadio),
      Math.floor(y * scaleRadio),
      img.width,
      img.height,
      0,
      0,
      img.width,
      img.height
    );
    getImageFileInfo().then(fileInfo => {
      // 上传图片到接口
      uploadImage(fileInfo);
    });
  };
};
const getImageFileInfo = (): Promise<any> => {
  return new Promise((resolve, reject) => {
    // 将canvas转成图片base64的url，可以直接打开
    // console.log(canvas.toDataURL('image/png'));
    // 将canvas转成Blob格式的二进制数据
    canvas.toBlob(blob => {
      if (!blob) {
        console.error("Canvas is empty");
        return;
      }
      resolve(blob);
    });
  });
};

• 使用 ajax 请求图片来解决跨域

const canvas = document.createElement("canvas");
const ctx: any = canvas.getContext("2d");
const requestImg = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    const url = URL.createObjectURL(this.response);
    const img = new Image();
    img.onload = function() {
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      ctx.drawImage(this, 0, 0, img.naturalWidth, img.naturalHeight);
      URL.revokeObjectURL(url);
      const base64 = canvas.toDataURL();
      console.log(base64);
    };
    img.src = url;
  };
  xhr.open("GET", props.src || "", true);
  xhr.responseType = "blob";
  xhr.send();
};

image-core 完整组件

import React, { useState, useEffect } from "react";
import ReactCrop from "react-image-crop";
import { SuperUpload } from "@/components/Base";
import defaultConfig from "./config";
import "react-image-crop/dist/ReactCrop.css";
import { multipartUpload } from "@/components/Upload/method";
import { signatureUrl } from "@/utils/oss";

const style = require("./index.less");

export interface CoreImageInterface {
  imgMinWH?: { w: number, h: number };
  visible: boolean;
  value?: string;
  config?: any;
  src?: string;
  aspect?: number;
  openCore: Function;
  srcChange: Function;
  onCancel?: Function;
  onChange?: Function;
}

export function getImgSize(src: any, w: number, h: number): Promise<any> {
  return new Promise((resolve, reject) => {
    if (!src) return;
    const img = document.createElement("img");
    img.src = src;
    img.onload = function() {
      const { width, height } = img;
      if (width < w || height < h) {
        reject(`请上传宽大于${w}，高大于${h}的图片`);
        return;
      }
      resolve({ width, height, img });
    };
  });
}

export function makeUploadName() {
  return "core-image/" + +new Date();
}

const canvas = document.createElement("canvas");
const ctx: any = canvas.getContext("2d");

const CoreImage: React.FC<CoreImageInterface> = props => {
  const [crop, setCrop]: [any, Function] = useState({
    aspect: props.aspect || 3 / 1
  });
  const [scaleRadio, setScaleRadio] = useState(1);
  const [visible, setVisible] = useState(false);
  const [src, setSrc] = useState("");
  const config = { ...defaultConfig, ...props.config };

  useEffect(() => {
    setVisible(props.visible);
    if (!props.visible) {
      setCrop({ aspect: props.aspect || 3 / 1 });
      setSrc("");
      return;
    }
    initCrop();
  }, [props.visible]);

  const initCrop = () => {
    const img = new Image();
    const src = signatureUrl(props.src || "", false);
    img.src = src;
    img.onload = function() {
      setSrc(src || "");
    };
  };

  const initImage = (image: any) => {
    const { width, height } = image;
    let radio = height / config.imgMinWH.h;
    let cW = width / radio,
      cH = config.imgMinWH.h;
    if (width === 900) {
      cW = 900;
      radio = 1;
      let wRadio = cW / width;
      cH = height * wRadio;
    }
    image.width = cW;
    image.height = cH;
    setScaleRadio(radio);
    setCrop({ ...crop, ...{ x: 0, y: 0, width: cW, unit: "px" } });
  };

  const onImageLoaded = (image: any) => {
    initImage(image);
  };

  const cropOnChange = (newCrop: any) => {
    if (newCrop.width * scaleRadio < config.imgMinWH.w) return;
    setCrop(newCrop);
    // console.log(crop);
  };

  const canvasImage = () => {
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = signatureUrl(props.src || "", false);
    common.showLoading();
    img.onload = function() {
      const { x, y, width, height } = crop;
      canvas.width = Math.floor(width * scaleRadio);
      canvas.height = Math.floor(height * scaleRadio);
      ctx.drawImage(
        img,
        Math.floor(x * scaleRadio),
        Math.floor(y * scaleRadio),
        img.width,
        img.height,
        0,
        0,
        img.width,
        img.height
      );
      getImageFileInfo().then(fileInfo => {
        uploadImage(fileInfo);
      });
    };
  };

  const uploadImage = (fileInfo: Blob) => {
    const fileName = makeUploadName();
    multipartUpload({ fileName, fileInfo }).then((res: any) => {
      common.hideLoading();
      props.onChange && props.onChange(res.name);
    });
  };

  // ajax请求图片来解决跨域
  // const requestImg = () => {
  //   ctx.clearRect(0, 0, canvas.width, canvas.height);
  //   const xhr = new XMLHttpRequest();
  //   xhr.onload = function() {
  //     const url = URL.createObjectURL(this.response);
  //     const img = new Image();
  //     img.onload = function() {
  //       canvas.width = img.naturalWidth;
  //       canvas.height = img.naturalHeight;
  //       ctx.drawImage(this, 0, 0, img.naturalWidth, img.naturalHeight);
  //       URL.revokeObjectURL(url);
  //       const base64 = canvas.toDataURL();
  //       console.log(base64);
  //     };
  //     img.src = url;
  //   };
  //   xhr.open('GET', props.src || '', true);
  //   xhr.responseType = 'blob';
  //   xhr.send();
  // };

  const getImageFileInfo = (): Promise<any> => {
    return new Promise((resolve, reject) => {
      // console.log(canvas.toDataURL('image/png'));
      canvas.toBlob(blob => {
        if (!blob) {
          console.error("Canvas is empty");
          return;
        }
        resolve(blob);
      });
    });
  };

  const openCore = () => {
    if (props.src) props.openCore();
  };

  const onCancel = () => {
    props.onCancel && props.onCancel();
  };

  const onConfirm = () => {
    canvasImage();
  };

  return (
    <div>
      <>
        <div className={style.showBox}>
          <img
            style={{
              width: `${config.thumbImageWH.w}px`,
              height: `${config.thumbImageWH.h}px`
            }}
            src={signatureUrl(props.value || "")}
            alt=""
          />
          <div className={style.againOp}>
            <SuperUpload
              accept=".png,.jpg"
              isSelect={true}
              showUploadList={false}
              listType="text"
              imgMinWH={config.imgMinWH}
              imgText={<div className={style.btn}>重新上传</div>}
              onChange={res => props.srcChange(res)}
            ></SuperUpload>
            <div onClick={openCore} className={style.btn}>
              裁剪头图
            </div>
          </div>
        </div>
      </>
      <>
        {visible && src ? (
          <div className={style.container}>
            <div className={style.core}>
              <ReactCrop
                src={src}
                crop={crop}
                onChange={cropOnChange}
                onImageLoaded={onImageLoaded}
              >
                {props.children}
              </ReactCrop>
              <div
                style={{
                  top: `${crop.y + crop.height / 2 - 15.5}px`,
                  left: `${crop.x + crop.width / 2 - 46}px`
                }}
                className={style.size}
              >{`${Math.floor(crop.width * scaleRadio)} × ${Math.floor(
                crop.height * scaleRadio
              )}`}</div>
              <div
                style={{
                  top: `${crop.height + crop.y + 10}px`,
                  left: `${crop.width + crop.x - 146}px`
                }}
                className={style.op}
              >
                <div onClick={onCancel} className={style.btn}>
                  取消
                </div>
                <div onClick={onConfirm} className={style.btn}>
                  确定
                </div>
              </div>
            </div>
          </div>
        ) : null}
      </>
    </div>
  );
};

export default CoreImage;