1.0.11 • Published 1 year ago
simple-fabric-vue-image-editor v1.0.11
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
ornpm i
yarn build
npm run publish-package
to push to nmpjs registry
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago