filerobot-image-editor-vue3

This is a Vue 3 wrapper component for the Filerobot Image Editor, a powerful and user-friendly image editor library. It provides an easy way to integrate advanced image editing features into your Vue 3 applications, enabling users to edit, crop, resize, annotate, and enhance images directly in the browser.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

1npm install

Compile and Hot-Reload for Development

1npm run dev

Type-Check, Compile and Minify for Production

1npm run build

Run Unit Tests with Vitest

1npm run test:unit

Run End-to-End Tests with Cypress

1npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

1npm run build
2npm run test:e2e

Lint with ESLint

1npm run lint

Usage

Once installed, you can use the image editor component in your Vue application by passing a config object with various configuration options.

Importing the Component

1<script lang="ts">
2import { FilerobotImageEditorVue3 } from 'filerobot-image-editor-vue3';
3import type { IFilerobotImageEditorConfig, TOOLS, TABS } from 'filerobot-image-editor-vue3';
4
5export default {
6  components: {
7    FilerobotImageEditorVue3,
8  },
9  setup() {
10    const editorRef = ref(null);
11
12    const editorConfig: IFilerobotImageEditorConfig = {
13      tools: [TOOLS.CROP, TOOLS.RESIZE],
14      tabs: [TABS.ADJUST, TABS.FILTERS],
15      source: 'https://example.com/image.jpg',
16      language: 'en',
17    };
18
19    return { editorConfig, editorRef };
20  },
21};
22</script>
23
24<template>
25  <div>
26    <FilerobotImageEditorVue3 ref="editorRef" :config="editorConfig" />
27  </div>
28</template>

Props

Prop	Type	Description
config	IFilerobotImageEditorConfig	Configuration object for tools and tabs.

Types

You can use the exported types for configuration:

1import type { IFilerobotImageEditorConfig, TOOLS, TABS } from 'filerobot-image-editor-vue3'
2
3const editorConfig: IFilerobotImageEditorConfig = {
4  tools: [TOOLS.CROP, TOOLS.RESIZE],
5  tabs: [TABS.ADJUST, TABS.FILTERS],
6}

Configuration Options

The config prop is an object that follows the IFilerobotImageEditorConfig interface. Below is a breakdown of the available configuration options:

General Configuration

• theme: (optional) The theme of the editor ('light' or 'dark').
• source: The source of the image to be edited. Can be a URL string or an HTMLImageElement.
• language: (optional) Language for the editor interface. Supported languages include: 'en', 'fr' or a custom language string.
• translations: (optional) A custom translation object to localize the editor text.

Tool Configurations

• Text Annotation (Text):

  • fonts: (optional) An array of font options available for text annotations.
  • onFontChange: (optional) Callback triggered when the font is changed.

• Crop Tool (Crop):

  • minWidth, minHeight: Minimum width and height for the crop tool.
  • ratio: Defines the aspect ratio for cropping ('original', 'custom', 'ellipse', or a numeric value).
  • presetsItems: (optional) Predefined crop ratio options (e.g., '16:9').

• Watermark Tool (Watermark):

  • gallery: (optional) List of available watermarks.
  • onUploadWatermarkImgClick: (optional) Function to handle watermark image uploads.

Event Handlers

• onBeforeSave: (optional) Callback function to run before saving the image.
• onSave: (optional) Callback function to run when saving the image.
• onClose: (optional) Callback function when closing the editor, with parameters for the reason and unsaved changes.

Conclusion

The config prop allows you to fully customize the behavior and appearance of the image editor. You can control the available tools, event handlers, and even integrate with cloud services such as Cloudimage. This package provides a simple and flexible solution for adding image editing features to your Vue 3 applications.

---

License

MIT License - see LICENSE for details.