@fge-bo-vue/img-utils-lib

Libreria Vue 3 para captura, drag & drop, crop, zoom, resize, compresion y normalizacion de salida. Sin logica HTTP ni backend.

Instalacion

npm install @fge-bo-vue/img-utils-lib

Uso con main.js

import { createApp } from 'vue'
import App from './App.vue'
import { createFaceToolkit } from '@fge-bo-vue/img-utils-lib'
import '@fge-bo-vue/img-utils-lib/dist/style.css'

createFaceToolkit({
  theme: {
    primaryColor: '#2563eb',
    secondaryColor: '#64748b',
    borderRadius: '10px'
  }
})

createApp(App).mount('#app')

Uso con main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createFaceToolkit } from '@fge-bo-vue/img-utils-lib'
import '@fge-bo-vue/img-utils-lib/dist/style.css'

createFaceToolkit({
  theme: {
    primaryColor: '#0ea5e9',
    secondaryColor: '#334155',
    borderRadius: '12px'
  }
})

createApp(App).mount('#app')

Componentes

<script setup lang="ts">
import { FaceUploader, FaceCamera, FaceCropper, FacePreview } from '@fge-bo-vue/img-utils-lib'
import { ref } from 'vue'

const cropped = ref('')
const images = ref([])
</script>

<template>
  <FaceUploader @select="(files) => console.log(files)" />
  <FaceCamera @capture="(file) => console.log(file)" />
  <FaceCropper :src="cropped" @crop="(blob) => console.log(blob)" />
  <FacePreview :images="images" />
</template>

FaceCompact

<script setup lang="ts">
import { FaceCompact, createFaceToolkit } from '@fge-bo-vue/img-utils-lib'
import type { ImageProcessingOptions, ProcessedImage } from '@fge-bo-vue/img-utils-lib'
import { ref } from 'vue'
import '@fge-bo-vue/img-utils-lib/dist/style.css'

createFaceToolkit({
  theme: {
    primaryColor: '#2563eb',
    secondaryColor: '#475569',
    borderRadius: '16px'
  }
})

const options: ImageProcessingOptions = {
  processing: {
    resize: { width: 720 },
    quality: 0.85,
    maxSizeMB: 2
  },
  output: {
    base64: true,
    blob: true,
    file: true
  }
}

const images = ref<ProcessedImage[]>([])
</script>

<template>
  <FaceCompact
    v-model:images="images"
    :options="options"
    :allow-remove="true"
    :readonly="false"
    :max-items="5"
    accept="image/*"
    :aspect-ratio="1"
    :max-size-m-b="8"
    @change="(value) => console.log('images', value)"
    @error="(message) => console.error(message)"
  />
</template>

Procesamiento multiple

import { createFaceToolkit } from '@fge-bo-vue/img-utils-lib'

const toolkit = createFaceToolkit()
const result = await toolkit.processImages(files, {
  processing: {
    resize: { width: 1024 },
    quality: 0.8,
    maxSizeMB: 1
  },
  output: {
    base64: true,
    blob: true,
    file: true,
    arrayBuffer: false
  }
})

Composables

import { useImageProcessor, useFaceCapture, useDeviceDetection } from '@fge-bo-vue/img-utils-lib'

const { process, loading, error } = useImageProcessor(toolkit.processImages)
const { devices, start, capture } = useFaceCapture()
const { ios, safari, mobile } = useDeviceDetection()

Build

npm run build

Testing

npm run test