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

巴特西

React实用插件收集

最新文章

热门文章