Pixelit 图片像素化

Pixelit 用于将图片进行像素风格渲染。支持自定义缩放比例、灰度处理、调色板替换等

TIP

对于复杂图片, 相较于 PxImage 组件, Pixelit 组件性能更高, 但对于纯色图片处理较差, 请合理使用

基本用法

通过设置 src 属性指定原始图片地址, 组件会自动进行像素化处理

<template>
  <div class="pixelit-container f-c">
    <pixelit-compare src="/pixel-ui/images/e.png" :scale="4" />
  </div>
</template>

图像尺寸

通过设置 width、height 属性来设置组件的宽高, 默认为图片的宽高。

提供 aspect-ratio 属性来设置组件的缩放, 默认为 1

<template>
  <div class="pixelit-container f-c">
    <pixelit-compare
      src="/pixel-ui/images/image1_portrait.jpg"
      :scale="4"
      aspect-ratio="0.5"
    />
  </div>
</template>

灰度化

设置 grayscale 属性来对图片进行灰度处理

<template>
  <div class="pixelit-container f-c">
    <pixelit-compare src="/pixel-ui/images/xtaffy.png" :scale="4" grayscale />
  </div>
</template>

调色板替换

通过 palette 属性可设置自定义颜色调色板 (二维 RGB 数组), 对图像颜色进行替换

<template>
  <pixelit-compare
    src="/pixel-ui/images/Starbucks.png"
    :palette="palette"
    aspect-ratio="0.5"
  />
</template>
<script setup lang="ts">
// PICO-8 Palette (复古虚拟主机风)
const palette = [
  [0, 0, 0],
  [29, 43, 83],
  [126, 37, 83],
  [0, 135, 81],
  [171, 82, 54],
  [95, 87, 79],
  [194, 195, 199],
  [255, 241, 232]
]
</script>

在线体验

提供在线演练场, 上传图片, 快速体验

<template>
  <div class="upload f-c mb-20">
    <px-button type="sakura" @click="uploadImg">
      Upload
      <px-icon icon="upload-alt-solid" color="#554562" />
    </px-button>
    <input
      ref="fileInputRef"
      type="file"
      accept="image/*"
      class="hidden"
      @change="handleFileChange"
    />
  </div>
  <div class="f-c mb-20">
    <px-button @click="isGrayscale = !isGrayscale" type="sakura"
      >grayscale</px-button
    >
  </div>
  <div class="f-c mb-20">
    <px-text class="w-250 text-10" tag="div"
      >AspectRatio:{{ aspectRatio }}</px-text
    >
    <px-button icon="minus-solid" @click="decreaseAspectRatio"></px-button>
    <px-button icon="plus-solid" @click="increaseAspectRatio"></px-button>
  </div>
  <div class="f-c mb-20">
    <px-text class="w-120 text-10" tag="div">Scale:{{ scale }}</px-text>
    <px-button icon="minus-solid" @click="decreaseScale"></px-button>
    <px-button icon="plus-solid" @click="increaseScale"></px-button>
    <input type="range" v-model="scale" min="2" max="50" step="1" />
  </div>
  <div class="f-c mb-20">
    <px-text class="w-250 text-10" tag="div">Palette:</px-text>
    <select v-model="selectedPaletteName">
      <option value="">Default</option>
      <option v-for="(_, name) in palettes" :key="name" :value="name">
        {{ name }}
      </option>
    </select>
  </div>
  <div class="pixelit-container f-c">
    <pixelit-compare
      :src="pixelitSrc"
      :scale="scale"
      :aspect-ratio="aspectRatio"
      :palette="selectedPalette"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const scale = ref(4)
const aspectRatio = ref(0.5)
const step = 0.1

const decreaseAspectRatio = () => {
  aspectRatio.value = Math.max(
    0.1,
    Math.round((aspectRatio.value - step) * 10) / 10
  )
}

const increaseAspectRatio = () => {
  aspectRatio.value = Math.min(
    1.0,
    Math.round((aspectRatio.value + step) * 10) / 10
  )
}
const decreaseScale = () => {
  scale.value = Math.max(scale.value - 1, 2)
}
const increaseScale = () => {
  scale.value = Math.min(scale.value + 1, 50)
}

const isGrayscale = ref(false)
const pixelitSrc = ref('/pixel-ui/images/Starbucks.png')

const fileInputRef = ref<HTMLInputElement>()
const uploadImg = () => {
  fileInputRef.value?.click()
}

const handleFileChange = (e: Event) => {
  const files = (e.target as HTMLInputElement).files
  if (files && files.length > 0) {
    const file = files[0]
    const url = URL.createObjectURL(file)
    pixelitSrc.value = url
  }
}

// 🎨 定义常用调色板
const palettes: Record<string, number[][]> = {
  Gray: [
    [0, 0, 0],
    [85, 85, 85],
    [170, 170, 170],
    [255, 255, 255]
  ],
  GameBoy: [
    [15, 56, 15],
    [48, 98, 48],
    [139, 172, 15],
    [155, 188, 15]
  ],
  NES: [
    [0, 0, 0],
    [255, 255, 255],
    [255, 0, 0],
    [0, 0, 255],
    [255, 165, 0]
  ],
  CGA: [
    [0, 0, 0],
    [255, 255, 255],
    [170, 255, 238],
    [255, 85, 255]
  ],
  'PICO-8': [
    [0, 0, 0],
    [29, 43, 83],
    [126, 37, 83],
    [0, 135, 81],
    [171, 82, 54],
    [95, 87, 79],
    [194, 195, 199],
    [255, 241, 232]
  ]
}

const selectedPaletteName = ref('')
const selectedPalette = computed(() => palettes[selectedPaletteName.value])
</script>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

PixelIt API

Props

Name	Description	Type	Default
src	待处理图片的 src	string	-
scale	缩放比例, nn 个像素块压缩到 11 个像素块	number	4
palette	颜色调色板, 默认为 16 色灰度色板	number[][] | null	null
grayscale	是否灰度化	boolean	false
width	宽度(px)	number | string	-
height	高度(px)	number | string	-
aspectRatio	缩放比例,原图尺寸过大时强烈建议设置	number | string	1

Expose

Name	Description	Type
render	渲染图片	function
originRef	原始图片的引用	Ref<HTMLImageElement | undefined>
canvasRef	渲染图片的引用	Ref<HTMLCanvasElement | undefined>
getSize	图片尺寸获取	function