simple-fabric-vue-image-editor

Image Editor

A brief description of what the library is and what it does. Here will be description of all editor modules

Installation

To install the library, run the following command:

npm install simple-fabric-vue-image-editor

# or

yarn add simple-fabric-vue-image-editor

Usage

To use the library in your project - import the desired components or composables. You can use image editor out of box by using vue component or import vue composable

Direct usage example:

<template>
    <image-editor :image-url="linkToYourImage"/>
</template>

<script setup lang=ts> 
import { ImageEditor } from 'simple-fabric-vue-image-editor'
</script>

Also editor exposes its instance via template ref. Usage example:

    <template>
        <image-editor ref="editorInstance"/>
        <button @click="download" />
    </template>

    <script setup lang="ts">
    import { ImageEditor } from 'simple-fabric-vue-image-editor'
    import { ref } from 'vue'

    const editorInstance = ref<{
        editorInstance: UseImageEditor | null
    }>()

    const download = () => {
        if (!editorInstance.value) return

        const { editorInstance: editor } = editorInstance.value

        if (!editor) return

        editor.download()
    }
    </script>

you need to import styles if you want to use Vue components

import 'simple-fabric-vue-image-editor/dist/fabric-vue-image-editor-ts.css'

Creating own editor example:

<template>
    <div class='your-image-editor'>
        <div ref="editorContainerRef">
            <canvas ref="editorCanvasRef" />
        </div>
        <your-own-component-for-tools v-if="isEditorInitialized" />
    </div>
<template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import { 
    useImageEditor,
    EditorInstanceKey
} from 'simple-fabric-vue-image-editor'

const editorContainerRef = ref<HTMLElement | null>(null)
const editorCanvasRef = ref<HTMLCanvasElement | null>(null)

const isEditorInitialized = ref(false)

/* to avoid visual bugs with canvas - invoking composable only when
    editor container ref initialized
*/
onMounted(async () => {
  if (!editorCanvasRef.value || !editorContainerRef.value) return

  const editorInstance = useImageEditor(editorCanvasRef, editorContainerRef)

  try {
    await editorInstance.init(/* yourImageURL */)
    // providing canvas instance to all nested layers 
    provide(EditorInstanceKey, { instance: editorInstance })
    isEditorInitialized.value = true
    /* 
        After editorInstance is provided you can access it
        in descendant components using vue inject

        example:
        import { inject } from 'vue'
        import { EditorInstanceKey } from 'simple-fabric-vue-image-editor'
        
        const { instance } = inject(EditorInstanceKey)
  */

  } catch (error) {
    /* your error handling */
  }
})
</script>

Manual building

To manually build the library:

• clone git repo

• install all depenecies
  yarn install

  or

  npm i

• yarn build

• npm run publish-package to push to nmpjs registry