vue-pic-tech-editor

vue-pic-tech-editor

基于 Vue 3.5 和 Fabric.js 的图片翻译与在线编辑组件，支持图片上传、翻译结果编辑、文本编辑、裁剪、擦除、局部恢复、撤销/重做、对照查看、保存和导出。

选中文字后可在文字编辑面板中选择“恢复原图”，直接按文字区域还原原图像素；也可选择“恢复为文字”，恢复初始文字内容与样式并继续编辑。

环境要求

• Vue >=3.5.0 <3.6.0
• 需要可用的图片翻译后端接口

安装

npm install vue-pic-tech-editor

fabric 会作为插件依赖自动安装。若通过 <script> 直接使用 UMD 文件，需要先加载 Fabric.js 5，再加载插件的 UMD 文件。

注册插件

import { createApp } from 'vue'
import App from './App.vue'
import ImageEditorPlugin from 'vue-pic-tech-editor'
import 'vue-pic-tech-editor/dist/vue-pic-tech-editor.css'

const app = createApp(App)

app.use(ImageEditorPlugin, {
  apiConfig: {
    UPLOAD_API: 'https://api.example.com/api/translate/upload',
    URL_API: 'https://api.example.com/api/translate/url',
    RESULT_API: 'https://api.example.com/api/translate/result',
    SAVE_API: 'https://api.example.com/api/translate/save',
    UPLOAD_EXPORT_IMG_API: 'https://api.example.com/api/translate/uploadExportedImage',
    IO_IN_PAINT_API: 'https://api.example.com/api/translate/iopaint',
    UPLOAD_IO_IN_PAINT_IMG_API: 'https://api.example.com/api/translate/uploadIoInpaintImage',
  },
})

app.mount('#app')

未传入 apiConfig 时，组件默认请求当前站点下的 /api/translate/* 相对路径。

使用组件

插件会全局注册 ImageEditor：

<template>
  <ImageEditor
    :initial-data="initialData"
    :button-config="buttonConfig"
    @new-result="handleNewResult"
    @save-result="handleSaveResult"
  />
</template>

<script setup>
const initialData = { Data: {} }

const buttonConfig = {
  upload: true,
  addText: true,
  restore: true,
  crop: true,
  undo: true,
  redo: true,
  erase: true,
  export: true,
  save: true,
  reset: true,
  compare: true,
}

function handleNewResult(result) {
  console.log('新的翻译结果：', result)
}

function handleSaveResult(result) {
  console.log('保存结果：', result)
}
</script>

也可以按需导入组件：

import { ImageEditor } from 'vue-pic-tech-editor'
import 'vue-pic-tech-editor/dist/vue-pic-tech-editor.css'

本地开发

npm install
npm run serve

构建 npm 组件库：

npm run build

License

MIT