react-img-editor 图片编辑

最新推荐文章于 2024-09-12 07:51:21 发布

景尘

最新推荐文章于 2024-09-12 07:51:21 发布

阅读量1.7k

点赞数

文章标签： react.js javascript vue.js

本文链接：https://blog.csdn.net/lbPro0412/article/details/124752430

版权

这篇博客介绍了如何在React应用中引入并使用React Img Editor组件进行图片编辑。通过示例代码展示了如何设置编辑器的源图像、尺寸、插件等属性，并提供了保存编辑后图片的方法，涉及将舞台转换为canvas，然后转换为base64数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')
  }