Skip to content

PixelImage 像素图片

PixelImage组件用于创建像素风格的图片效果,可以将普通图片转换为像素化的复古风格。

基础用法

通过传入图片地址,即可创建一个基础的像素化图片。

自定义间距

你可以通过pixelGap属性来控制像素块之间的间距。

自定义像素大小

你可以通过pixelSize属性来控制像素化的程度,数值越大像素块越大。

自定义视窗大小

通过viewport-widthviewport-height属性,可以自定义视窗大小。

属性

属性名说明类型默认值
width图片宽度number200
height图片高度number200
pixelSize像素块大小number4
src图片地址string-
pixelGap像素块间距number4

注意事项

  1. 组件会继承原生img标签的所有属性。
  2. 为了获得最佳效果,建议使用分辨率适中的图片。
  3. pixelSize值越大,图片像素化程度越高,建议根据实际需求调整。
  4. 组件暂不支持在线图片,需要本地图片。