https://github.com/parsajiravand/vue-heic-image
Vue component and composable for HEIC image preview and conversion
https://github.com/parsajiravand/vue-heic-image
heic heic-to-jpg heic2any javascript nuxt vue
Last synced: 7 months ago
JSON representation
Vue component and composable for HEIC image preview and conversion
- Host: GitHub
- URL: https://github.com/parsajiravand/vue-heic-image
- Owner: parsajiravand
- Created: 2025-03-16T19:17:52.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-03-16T19:47:36.000Z (7 months ago)
- Last Synced: 2025-03-16T19:51:59.044Z (7 months ago)
- Topics: heic, heic-to-jpg, heic2any, javascript, nuxt, vue
- Language: Vue
- Homepage: https://vue-heic-image.netlify.app/
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Vue HEIC Image
A Vue 3 component and composable for displaying and converting HEIC images in the browser. This package provides an easy way to preview HEIC images and convert them to other formats like PNG, JPEG, or GIF. It intelligently handles both HEIC and standard image formats.
## 🚀 Live Demo
Check out the live demo: [Vue HEIC Image Demo](https://vue-heic-image.netlify.app)
[](https://app.netlify.com/sites/vue-heic-image/deploys)
## Features
- 🖼️ Display HEIC images directly in the browser
- 🔄 Convert HEIC to PNG, JPEG, or GIF
- ✨ Smart detection of HEIC files (no conversion for standard images)
- 📱 Perfect for iOS photos and HEIC image handling
- 🎨 Quality control for JPEG output
- 🎬 Support for animated HEIC files
- 💪 TypeScript support
- 🎁 Flexible usage: Component or Composable function
## Installation
```bash
npm install vue-heic-image
# or
yarn add vue-heic-image
# or
pnpm add vue-heic-image
```
## Usage
### Basic Component Usage
```vue
import { HeicImage } from 'vue-heic-image';
```
### Advanced Component Usage
```vue
{{ isHeic ? 'Converting HEIC...' : 'Loading image...' }}
Failed to load: {{ error.message }}
```
### File Input Example
```vue
{{ isHeic ? 'Converting HEIC...' : 'Loading...' }}
PNG
JPEG
GIF
import { ref } from 'vue';
import { HeicImage } from 'vue-heic-image';
import type { HeicOutputType } from 'vue-heic-image';
const selectedFile = ref<File | null>(null);
const outputFormat = ref<HeicOutputType>('image/png');
const quality = ref(0.92);
const handleFileSelect = (event: Event) => {
const file = (event.target as HTMLInputElement).files?.[0];
if (file) selectedFile.value = file;
};
```
### Using the Composable
```typescript
import { useHeicImage } from 'vue-heic-image';
// Basic usage
const { convertHeicToImage, isLoading, error, isHeic } = useHeicImage();
// With options
const imageHandler = useHeicImage({
toType: 'image/png',
quality: 0.92,
multiple: false,
gifInterval: 0.4,
});
// Handle file conversion
const handleFile = async (file: File) => {
try {
const result = await convertHeicToImage(file);
// Check if the processed image was HEIC
if (isHeic.value) {
console.log('HEIC image was converted');
} else {
console.log('Standard image was processed directly');
}
// Handle the result
const url = URL.createObjectURL(
Array.isArray(result) ? result[0] : result
);
// Clean up when done
return () => URL.revokeObjectURL(url);
} catch (e) {
console.error('Processing failed:', e);
}
};
```
## Props & Options
### Component Props
| Name | Type | Default | Description |
|------|------|---------|-------------|
| src | `File \| Blob \| string` | - | Source image (HEIC or standard formats) |
| alt | `string` | - | Alternative text for the image |
| toType | `'image/png' \| 'image/gif' \| 'image/jpeg'` | `'image/png'` | Output format for HEIC conversion |
| quality | `number` | `0.92` | JPEG quality (0-1), only for `'image/jpeg'` |
| multiple | `boolean` | `false` | Output multiple images for multi-frame HEIC |
| gifInterval | `number` | `0.4` | Frame interval for GIF output (seconds) |
| width | `number \| string` | - | Image width |
| height | `number \| string` | - | Image height |
| class | `string` | - | CSS class names |
### Slot Props
#### Loading Slot
```vue
```
#### Error Slot
```vue
```
## Smart Detection
The package automatically handles different image types:
- Detects HEIC images through:
- MIME type checking
- File signature analysis
- Standard images (PNG, JPEG, etc.) are displayed directly
- No unnecessary conversions for non-HEIC images
## Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Requires `FileReader` and `URL.createObjectURL` support
- iOS Safari: 13.4+
- Chrome/Edge: 89+
- Firefox: 86+
## License
MIT