常用的文件上传场景 https://juejin.cn/post/6980142557066067982

image.png

ReactImageCrop裁剪图片

https://github.com/DominicTobias/react-image-crop

  1. npm i react-image-crop
  1. function CropDemo({ src }) {
  2.   const [crop, setCrop] = useState({ aspect: 16 / 9 });
  3.   return <ReactCrop src={src} crop={crop} onChange={newCrop => setCrop(newCrop)} />;
  4. }

裁剪图片demo
https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o?file=/src/App.js:0-3132

  1. import React, { useState, useCallback, useRef, useEffect } from 'react';
  2. import ReactCrop from 'react-image-crop';
  3. import 'react-image-crop/dist/ReactCrop.css';
  5. function App() {
  6.   const [upImg, setUpImg] = useState();
  7.   const imgRef = useRef(null);
  8.   const previewCanvasRef = useRef(null);
  9.   const [crop, setCrop] = useState({ unit: '%', width: 30, aspect: 16 / 9 });
  10.   const [completedCrop, setCompletedCrop] = useState(null);
  12.   const onSelectFile = (e) => {
  13.     if (e.target.files?.length > 0) {
  14.       const reader = new FileReader();
  15.       reader.addEventListener('load', () => setUpImg(reader.result));
  16.       reader.readAsDataURL(e.target.files[0]);
  17.     }
  18.   };
  20.   const onLoad = useCallback((img) => {
  21.     imgRef.current = img;
  22.   }, []);
  24.   useEffect(() => {
  25.     if (!completedCrop || !previewCanvasRef.current || !imgRef.current) {
  26.       return;
  27.     }
  29.     const image = imgRef.current;
  30.     const canvas = previewCanvasRef.current;
  31.     const crop = completedCrop;
  33.     const scaleX = image.naturalWidth / image.width;
  34.     const scaleY = image.naturalHeight / image.height;
  35.     const ctx = canvas.getContext('2d');
  36.     const pixelRatio = window.devicePixelRatio;
  38.     canvas.width = crop.width * pixelRatio;
  39.     canvas.height = crop.height * pixelRatio;
  41.     ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
  42.     ctx.imageSmoothingQuality = 'high';
  44.     ctx.drawImage(
  45.       image,
  46.       crop.x * scaleX,
  47.       crop.y * scaleY,
  48.       crop.width * scaleX,
  49.       crop.height * scaleY,
  50.       0,
  51.       0,
  52.       crop.width,
  53.       crop.height
  54.     );
  55.   }, [completedCrop]);
  57.   return (
  58.     <div className="App">
  59.       <div>
  60.         <input type="file" accept="image/*" onChange={onSelectFile} />
  61.       </div>
  62.       <ReactCrop
  63.         src={upImg}
  64.         onImageLoaded={onLoad}
  65.         crop={crop}
  66.         onChange={(c) => setCrop(c)}
  67.         onComplete={(c) => setCompletedCrop(c)}
  68.       />
  69.       <div>
  70.         <canvas
  71.           ref={previewCanvasRef}
  72.           // Rounding is important so the canvas width and height matches/is a multiple for sharpness.
  73.           style={{
  74.             width: Math.round(completedCrop?.width ?? 0),
  75.             height: Math.round(completedCrop?.height ?? 0)
  76.           }}
  77.         />
  78.       </div>
  79.       <p>
  80.         Note that the download below won't work in this sandbox due to the
  81.         iframe missing 'allow-downloads'. It's just for your reference.
  82.       </p>
  84.       <button
  85.         type="button"
  86.         disabled={!completedCrop?.width || !completedCrop?.height}
  87.         onClick={() =>
  88.           generateDownload(previewCanvasRef.current, completedCrop)
  89.         }
  90.       >
  91.         下载图片
  92.       </button>
  93.     </div>
  94.   );
  95. }
  97. export default App;
  99. // 下载图片
  100. function generateDownload(canvas, crop) {
  101.   if (!crop || !canvas) {
  102.     return;
  103.   }
  105.   canvas.toBlob(
  106.     (blob) => {
  107.       const previewUrl = window.URL.createObjectURL(blob);
  109.       const anchor = document.createElement('a');
  110.       anchor.download = 'cropPreview.png';
  111.       anchor.href = URL.createObjectURL(blob);
  112.       anchor.click();
  114.       window.URL.revokeObjectURL(previewUrl);
  115.     },
  116.     'image/png',
  117.     1
  118.   );
  119. }

antd-img-crop图片裁剪

基于 react-easy-crop和 antd Modal的图片上传封装
图片裁剪是基于 Modal的弹窗，缺点

function ImageCrop() { const [fileList, setFileList] = useState([ { uid: ‘-1’, url: ‘https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png‘, }, ]);

const onChange = ({ fileList: newFileList }) => { setFileList(newFileList); };

const onPreview = async (file) => { let src = file.url; if (!src) { src = await new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(file.originFileObj); reader.onload = () => resolve(reader.result); }); } const image = new Image(); image.src = src; const imgWindow = window.open(src); imgWindow.document.write(image.outerHTML); };

return ( {fileList.length < 3 && ‘+ Upload’} ); };

export default ImageCrop;

  2. <a name="CI3L6"></a>
  3. ### react-easy-crop
  4. antd-img-crop就是对 react-easy-crop的封装<br />[https://github.com/ricardo-ch/react-easy-crop](https://github.com/ricardo-ch/react-easy-crop)
  5. ```bash
  6. yarn add react-easy-crop

image.png