A lightweight image filter utility for canvas using TypeScript.
npm install @craftily/imageA lightweight, powerful image editing web component with advanced canvas filtering capabilities.
- 🖼️ Advanced image filtering
- 🌈 Multiple filter controls
- 🔧 Web Component compatible
- 💻 Framework-agnostic
- 📦 Lightweight and typed
- 🛠️ Flexible image utility methods
``bash`
npm install @craftily/image
#### Converting Images
`typescript
// Image Utility
import { imageUtils } from '@craftily/image';
// Convert to different formats
const pngBlob = await imageUtils.toPng();
const jpegBlob = await imageUtils.toJpeg(0.8);
const webpBlob = await imageUtils.toWebp();
// Get base64 data URL
const dataUrl = imageUtils.toDataURL('png');
// Download image directly
imageUtils.download('png');
`
#### Applying Filters Manually
`typescript
// Image Utility
import { imageUtils } from '@craftily/image';
// Apply filters manually
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
imageUtils.applyImageFilters(ctx, image, canvas, {
brightness: 120,
contrast: 110,
saturate: 150,
color: '#ff0000' // Red tint
});
`
`html`
controls='{
"brightness": { "label": "Brightness", "value": 100 },
"contrast": { "label": "Contrast", "value": 100 }
}'
showUpload
showDownload
>
`typescript
import '@craftily/image/editor';
function ImageEditorComponent() {
return (
controls={{
brightness: { label: 'Brightness', value: 100 },
contrast: { label: 'Contrast', value: 100 }
}}
showUpload
showDownload
/>
);
}
`
`vue
brightness: { label: 'Brightness', value: 100 },
contrast: { label: 'Contrast', value: 100 }
}"
showUpload
showDownload
/>
`
- Brightness
- Contrast
- Saturate
- Grayscale
- Opacity
- Sepia
- Hue Rotate
- Blur
- Color Tint
- src: Initial image sourcecontrols
- : Customize image editing controlsshowUpload
- : Toggle upload buttonshowDownload
- : Toggle download button
- imageEdited: Triggered when image is modifiedtoDataURL()
- Provides methods:
- : Get base64 imagetoBlob()
- : Get image as Blobdownload()
- : Download edited image
- Web Components
- React
- Vue
- TypeScript
- Modern Browsers
`typescript
// Image Utility
import { imageUtils } from '@craftily/image';
// Only editor component
import '@craftily/image/editor';
``
MIT License
canvas, image-filters, typescript, image-processing, web, lit