本人已参与「新人创作礼」活动，一起开启掘金创作之路
在开发中，我们经常会遇到图片编辑的需求，常为上传图片或者发表评论的时候所需要的
推荐一个开箱即用的图片编辑的组件react-filerobot-image-editor，个人认为这是一个自带工具编辑丰富的组件，例如插入水印（文字和图片都支持），而且可修改水印的阴影（box-shadow）。
效果图如下
该组件支持js/react/vue，这里演示的是react
使用的技术栈为react，typescript
安装组件
yarn add react-filerobot-image-editor styled-components
import React, { useEffect, useState } from 'react';
import FilerobotImageEditor, {
TABS,
TOOLS,
} from 'react-filerobot-image-editor';
export const Bpp = () => {
const [isImgEditorShown, setIsImgEditorShown] = useState(false);
const [source,setSource]=useState('')
const [src1,setSrc1]=useState('')
const openImgEditor = () => {
let input = document.createElement('input')//创建input type='file'
input.type = 'file'
input.onchange = (e) => {//上传图片
let files = e.target.files
if (files) {
if (files[0].type.indexOf('image') == -1) return//判断是不是图片
let reder = new FileReader()
reder.readAsDataURL(files[0])
reder.onload = (e) => {
setSource(e.target.result)
}
}
}
input.click()//触发上传
input.remove()//删除input
setIsImgEditorShown(true);
};
const closeImgEditor = () => {
setSource(null)
setIsImgEditorShown(false);
};
useEffect(()=>{
const dom=document.querySelector('.ebWdsB')
if(dom){
dom.style.backgroundColor='#dedede'
}
},[isImgEditorShown])
return (
<>
<div>
<button onClick={openImgEditor}>Open Filerobot image editor</button>
<div style={{width:'50%'}}>
{isImgEditorShown&&source&& (
<FilerobotImageEditor
source={source}//图片的地址，或者base64
//language='en'语言，默认是英语，可自定义，通过translations
onSave={(editedImageObject, designState) =>{//保存
setSrc1(editedImageObject.imageBase64)
console.log('saved', editedImageObject, designState)
}
}
onClose={closeImgEditor}//关闭
annotationsCommon={{
fill: '#ff0000',
}}
Text={{ text: 'Filerobot...' }}
Rotate={{ angle: 90, componentType: 'slider' }}
Crop={{
presetsItems: [
{
titleKey: 'classicTv',
descriptionKey: '4:3',
ratio: 4 / 3,
// icon: CropClassicTv, // optional, CropClassicTv is a React Function component. Possible (React Function component, string or HTML Element)
},
{
titleKey: 'cinemascope',
descriptionKey: '21:9',
ratio: 21 / 9,
// icon: CropCinemaScope, // optional, CropCinemaScope is a React Function component. Possible (React Function component, string or HTML Element)
},
],
presetsFolders: [
{
titleKey: 'socialMedia', // will be translated into Social Media as backend contains this translation key
// icon: Social, // optional, Social is a React Function component. Possible (React Function component, string or HTML Element)
groups: [
{
titleKey: 'facebook',
items: [
{
titleKey: 'profile',
width: 180,
height: 180,
descriptionKey: 'fbProfileSize',
},
{
titleKey: 'coverPhoto',
width: 820,
height: 312,
descriptionKey: 'fbCoverPhotoSize',
},
],
},
],
},
],
}}
tabsIds={[TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK,TABS.FILTERS,TABS.FINETUNE,TABS.RESIZE]} //侧边栏的选项
defaultTabId={TABS.ANNOTATE} //用户打开插件后默认打开的选项卡。
defaultToolId={TOOLS.TEXT} // 开插件后的默认打开工具，并且必须是与打开的选项卡相关的工具之一
/>
)}
</div>
</div>
<img src={src1}/>
</>
);
}
中文的配置
translations={{
name: '名称',
save: '保存',
saveAs: '另存为',
back: '返回',
loading: '正在加载...',
resetOperations: '重置/删除所有操作',
changesLoseConfirmation: '所有更改都将丢失',
changesLoseConfirmationHint: '您确定要继续吗？',
cancel: '取消',
continue: '继续',
undoTitle: '撤消上一个操作',
redoTitle: '重做上次操作',
showImageTitle: '显示原始图像',
zoomInTitle: '放大',
zoomOutTitle: '缩小',
toggleZoomMenuTitle: '切换缩放菜单',
adjustTab: '调整',
finetuneTab: '微调',
filtersTab: '过滤器',
watermarkTab: '水印',
annotateTab: '绘制',
resize: '调整大小',
resizeTab: '调整大小',
invalidImageError: '提供的图像无效',
uploadImageError: '上传图像时出错',
areNotImages: 'are not images',
isNotImage: 'is not image',
toBeUploaded: '待上传',
cropTool: '裁剪',
original: '原件',
custom: '自定义',
square: '正方形',
landscape: '风景',
portrait: '肖像',
ellipse: '椭圆',
classicTv: '经典电视',
cinemascope: '电影镜',
arrowTool: '箭头',
blurTool: '模糊',
brightnessTool: '亮度',
contrastTool: '对比',
ellipseTool: '椭圆',
unFlipX: 'Un-Flip X',
flipX: '对称 X',
unFlipY: 'Un-Flip Y',
flipY: '对称 Y',
hsvTool: 'HSV',
hue: '色相',
saturation: '饱和度',
value: '值',
imageTool: '图像',
importing: '正在导入..',
addImage: '+ 添加图像',
lineTool: 'Line',
penTool: '笔',
polygonTool: '多边形',
sides: '侧面',
rectangleTool: '矩形',
cornerRadius: '角半径',
resizeWidthTitle: '宽度（以像素为单位）',
resizeHeightTitle: '高度（以像素为单位）',
toggleRatioLockTitle: '切换比率锁定',
reset: '重置',
resetSize: '重置为原始图像大小',
rotateTool: '旋转',
textTool: '文本',
textSpacings: '文本间距',
textAlignment: '文本对齐方式',
fontFamily: '字体系列',
size: '尺寸',
letterSpacing: '字母间距',
lineHeight: '行高',
warmthTool: '温暖',
addWatermark: '+ 添加水印',
addWatermarkTitle: '选择水印类型',
uploadWatermark: '上传水印',
addWatermarkAsText: '添加为文本',
padding: '填充',
shadow: '影子',
horizontal: '水平',
vertical: '垂直',
blur: '模糊',
opacity: '不透明度',
position: '位置',
stroke: '中风',
saveAsModalLabel: '将图像另存为',
extension: '扩展',
nameIsRequired: '名称为必填项',
quality: '质量',
imageDimensionsHoverTitle: '保存的图像大小（宽 x 高）',
cropSizeLowerThanResizedWarning:
'请注意，所选裁剪区域低于应用的调整大小，这可能会导致质量下降',
actualSize: '实际大小 （100%）',
fitSize: '适合尺寸',
}}
还有更多的自定义，需要的可到官方文档查询
