[JavaScript知识库] react-img-editor 图片编辑

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react-img-editor 图片编辑 -> 正文阅读

[JavaScript知识库]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')
  }