像素化 Pixelate

我们组件库导出函数 pixelateImage 用于将图片像素化。传入 URL、base64 字符串或者 <img> 对象，返回像素化后的 ImageData 对象。可以通过组件库提供的 imageDataToDataURL 函数可以转为 base64 格式的字符串，直接在 <img> 上使用。

基础使用

<template>
	<px-space direction="vertical">
		<px-image :src="'/pixelium-design/majyou.jpg'" style="height: 300px"></px-image>
		<px-image :src="pixel" style="height: 300px"></px-image>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { pixelateImage, imageDataToDataURL } from '@pixelium/web-vue'

// When on-demand import
// import { pixelateImage, imageDataToDataURL } from '@pixelium/web-vue/es'

const pixel = ref('')

// Pokémon Ruby & Sapphire Exterior Palette
// from https://lospec.com/palette-list/pokemon-ruby-sapphire-exterior
const data = [
	'#000000',
	'#83838b',
	'#dee6ee',
	'#ffffff',
	'#7b4141',
	'#835a5a',
	'#9c7373',
	'#a4a4a4',
	'#bdbdbd',
	'#d5d5d5',
	'#c54141',
	'#ff625a',
	'#de6a62',
	'#6a5a5a',
	'#a4625a',
	'#bd948b',
	'#deb4a4',
	'#eed5cd',
	'#ee9473',
	'#de9473',
	'#ffbd83',
	'#ffc594',
	'#ffd5b4',
	'#413931',
	'#cd9c52',
	'#ffc55a',
	'#bd9c5a',
	'#d5b46a',
	'#bdbd83',
	'#decd83',
	'#eee6a4',
	'#395200',
	'#398b31',
	'#83c562',
	'#b4ff83',
	'#18a46a',
	'#41b483',
	'#73c5a4',
	'#a4d5c5',
	'#528bc5',
	'#62acee',
	'#73bdf6',
	'#102039',
	'#182952',
	'#293962',
	'#4a73ac',
	'#62a4de',
	'#29315a',
	'#394a7b',
	'#9cb4de',
	'#bdcde6',
	'#414a6a',
	'#62627b',
	'#413141',
	'#624152',
	'#cd4152'
]

pixelateImage('/pixelium-design/majyou.jpg', 8, {
	palette: data
}).then((res) => {
	if (!res) {
		return
	}
	pixel.value = imageDataToDataURL(res)
})
</script>

API

function pixelateImage(imageSource: string | HTMLImageElement, pixelSize: number, options?: {
    palette?: string[];
    background?: string;
}): Promise<ImageData | null>

options.palette 限制像素化后可用的调色板，options.background 是涉及透明度时，对比颜色之间的距离的参考背景色，默认 #FFF，该参数 alpha 通道会被忽略。

这两个参数都支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。