React实用插件收集

1、react-img-editor 图片编辑

demo：

npm install react-img-editor -S

引入和使用

import ReactImgEditor from 'react-img-editor'
import 'react-img-editor/assets/index.css'
 
<ReactImgEditor
   src={src}
   width={656}
   height={300}
   plugins={[]}
   crossOrigin="anonymous"
   getStage={setStage}
 />

保存：

const stageRef = useRef<any>(null)
 
  const setStage = (stage) => {
    stageRef.current = stage
  }
 
  // 保存
   const save = () => {
    const canvas = stageRef.current.clearAndToCanvas({ pixelRatio: stageRef.current._pixelRatio })
    canvas.toBlob(function (blob: any) {
      const fileReader = new FileReader();
      fileReader.onload = async (e: any) => {
        console.log(e.target.result)//base64
      };
      fileReader.readAsDataURL(blob);
      fileReader.onerror = () => {
      };
    }, 'image/jpeg')
  }

2、图片编辑器filerobot-image-editor

https://blog.csdn.net/weixin_47605601/article/details/115553807