图片编辑器

中文 | English

简介

bunnn-canvas-image-editor 是一个基于 HTML5 Canvas 的简易图片编辑器，支持多种绘图工具、撤销/重置、多语言支持以及图片保存功能。

功能特性

• 基础绘图：矩形、圆形、箭头
• 画笔工具：自由绘制线条
• 文字工具：文本输入、双击编辑
• 马赛克/打码：局部打码
• 图片保存：导出为 Blob 图片格式
• 国际化：内置中英文支持（默认中文）

安装

npm install bunnn-canvas-image-editor

在 React 项目中使用

引入样式

import 'bunnn-canvas-image-editor/dist/style.css';

创建组件

import React, { useEffect, useRef } from 'react';
import { EditorApp } from 'bunnn-canvas-image-editor';

const ImageEditor = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorInstanceRef = useRef<any>(null);

  useEffect(() => {
    if (containerRef.current && !editorInstanceRef.current) {
      editorInstanceRef.current = new EditorApp(containerRef.current.id, {
        width: 800,
        height: 600,
        backgroundImage: 'https://picsum.photos/800/600',
        locale: 'zh',
        onSave: (blob) => {
          const link = document.createElement('a');
          link.download = 'edited-image.png';
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      });
    }
  }, []);

  return (
    <div id="editor-container" ref={containerRef} style={{ border: '1px solid #ddd' }} />
  );
};

export default ImageEditor;

配置选项 (EditorOptions)

• container: HTMLElement 编辑器挂载容器（内部使用）
• width: number 画布宽度
• height: number 画布高度
• backgroundImage: string 可选，背景图片 URL
• backgroundColor: string 可选，背景颜色，默认为白色
• locale: 'zh' | 'en' 可选，语言，默认为中文
• onSave: (blob: Blob) => void 可选，保存按钮回调