dh-image-editor图片编辑插件使用方法

1. 下载npm包

yarn add dh-image-editor

2. 组件内使用

import React,{useRef} from 'react';
import ImageEditor from 'dh-image-editor';

function ImageTest(){

    const imageRef = useRef(); //必须设置ref
    const imageData = {
        baseUrl: 图片原始路径,//必须传入该参数
        editObj: [], //图片中已绘制的几何图形集合
    }

    return <ImageEditor
            ref={imageRef}
            imageData={{...imageData}}
        />

}

3. 保存已编辑完成的图片

调用方法: imageRef.current.handleSave(),该方法返回的是一个promise对象,使用async await或者.then的方法获取返回的相关几何图形对象集合，示例如下:

    <Button onClick = {save}>保存<Button/>//页面保存按钮，save函数如下

    const save = ()=>{
        imageRef.current.handleSave().then(res=>{

        })
    }

    或者

    const save = async ()=>{
        const res = await imageRef.current.handleSave();
    }

    //其中res为ImageEditor组件返回的一个对象，该对象包含三个参数
    //baseUrl: 图片的原始路径
    //url: 图片编辑后的路径
    //editObj: 图片编辑的集合对象集合