Filter Library

The filter library is in the form of a stand-alone package, and the corresponding filter component package is installed for use. The filter library continues to grow, and you are welcome to submit your outstanding filter.

@awesome-image/filter-glitch

Glitch effect

<template>
  <AsImage
    class="demoimage"
    :width="1080"
    :height="722"
    :src="'/mount.jpg'"
  >
    <template #webglfilter="{ image }">
      <div>
        <as-filter-glitch :image="image"></as-filter-glitch>
      </div>
    </template>
  </AsImage>
</template>

@awesome-image/filter-fake3d

Fake 3D，shader from akella

Attribute

depth

• Type: string

  The depth map corresponding to the original image, can be generated using MidasMiDaS

scaleX / scaleY

• Type: number

• Default: 1

  Amount of the depth offset, you can change according to the depth image.

mouse

• Type: { x: number y: number}

You can override the default mouse hover effect by manually controlling the mouse value

Move the mouse over the image (needs to click on mobile) to see the effect

@awesome-image/filter-crt

Retro display effect, shader from pixi

@awesome-image/filter-ascii

ASCII character effect,shader from pixi

Attribute

pixel-size

• Type: number

• Default: 8

  Character size

@awesome-image/filter-hexagon

Hexagon mosaic effect, shader from pixi

Attribute

scale

• Type: number

• Default: 15

  Hexagon size

more

TODO