🎨 Vue Pixeling

A simple Vue 3 library for creating pixelated images using canvas.

Features

• VuePixelate: Static pixelation using canvas downscaling
• High Performance: Efficient canvas rendering
• TypeScript Support: Full type definitions included
• Lightweight: Vue as peer dependency, minimal bundle size
• File Upload: Easy integration with file inputs

Installation

pnpm add vue-pixel-physics
# or
npm install vue-pixel-physics
# or
yarn add vue-pixel-physics

##Usage

As Vue Plugin

import { createApp } from "vue";
import VuePixelPhysics from "vue-pixel-physics";
import App from "./App.vue";

const app = createApp(App);
app.use(VuePixelPhysics);
app.mount("#app");

Import Individual Component

<script setup lang="ts">
import { VuePixelate } from "vue-pixel-physics";
</script>

<template>
  <div>
    <!-- Static Pixelation -->
    <VuePixelate src="https://example.com/image.jpg" :pixelSize="8" />
  </div>
</template>

Component API

VuePixelate

| Prop | Type | Default | Description | | ----------- | -------- | ------------ | ------------------------ | | src | string | required | Image URL or data URL | | pixelSize | number | 5 | Size of each pixel block |

Examples

<template>
  <!-- Basic usage -->
  <VuePixelate src="/path/to/image.jpg" />

  <!-- With custom pixel size -->
  <VuePixelate src="/path/to/image.jpg" :pixelSize="10" />

  <!-- With file upload -->
  <input type="file" accept="image/*" @change="handleFileUpload" />
  <VuePixelate v-if="imageSrc" :src="imageSrc" :pixelSize="8" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { VuePixelate } from "vue-pixel-physics";

const imageSrc = ref("");

const handleFileUpload = (e: Event) => {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imageSrc.value = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }
};
</script>

Development

# Install dependencies
pnpm install

# Run demo app
pnpm dev

# Build library
pnpm build

License

MIT