PixelImage

The PixelImage component is used to create pixel-style image effects, transforming ordinary images into pixelated retro styles.

Basic Usage

By providing an image URL, you can create a basic pixelated image.

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center space-x-4">
    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
    />
    <ol-pixel-image
      src="/vue.png"
      width="200"
      height="auto"
    />
  </div>
</template>

Custom Spacing

You can control the spacing between pixel blocks using the pixelGap property.

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex  items-center space-x-4 justify-center">
    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
      :pixel-gap="2"
    />

    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
      :pixel-gap="4"
    />
  </div>
</template>

Custom Pixel Size

You can control the degree of pixelation using the pixelSize property. The larger the value, the larger the pixel blocks.

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center space-x-4">
    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
      :pixel-size="2"
    />
    <ol-pixel-image
      src="/vue.png"
      width="200"
      height="auto"
      :pixel-size="1"
    />
  </div>
</template>

Custom Viewport Size

You can customize the viewport size using the viewport-width and viewport-height properties.

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center">
    <ol-pixel-image
      src="/vue.png"
      :viewport-width="200"
      :viewport-height="200"
      :pixel-size="4"
    />
  </div>
</template>

Properties

Property Name	Description	Type	Default Value
width	Image width	number	200
height	Image height	number	200
pixelSize	Pixel block size	number	4
src	Image URL	string	-
pixelGap	Pixel block spacing	number	4

Notes

1. The component inherits all attributes of the native img tag.
2. For the best results, it is recommended to use images with moderate resolution.
3. The larger the pixelSize value, the higher the degree of pixelation. It is recommended to adjust according to actual needs.
4. The component currently does not support online images; local images are required.