1.0.9 • Published 4 years ago
dh-image-editor v1.0.9
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: 图片编辑的集合对象集合