GitHub - IvanLudvig/image-palette-webgpu: A tiny zero-dependency browser package that extracts dominant color or color palette from an image using WebGPU API with various algorithms

2 min read Original article ↗

Published on NPM

A tiny zero-dependency browser package that extracts dominant color or color palette from an image using WebGPU API with various algorithms.

Table of contents

Live demo

https://ivanludvig.dev/image-palette-webgpu/

Install

npm i image-palette-webgpu

Import

Local

JS

import { extractDominantColors } from './node_modules/image-palette-webgpu/index.js';

HTML

<script type="module">
  import { extractDominantColors } from './node_modules/image-palette-webgpu/index.js';
</script>

Import maps

<script type="importmap">
  {
    "imports": {
      "image-palette-webgpu": "./node_modules/image-palette-webgpu/index.js"
    }
  }
</script>

JS

import { extractDominantColors } from 'image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'image-palette-webgpu';
</script>

Dev Servers / Builders

JS

import { extractDominantColors } from 'image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'image-palette-webgpu';
</script>

CDN

UNPKG

JS

import { extractDominantColors } from 'https://unpkg.com/image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'https://unpkg.com/image-palette-webgpu';
</script>

ESM CDN

JS

import { extractDominantColors } from 'https://esm.sh/image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'https://esm.sh/image-palette-webgpu';
</script>

Skypack

JS

import { extractDominantColors } from 'https://cdn.skypack.dev/image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'https://cdn.skypack.dev/image-palette-webgpu';
</script>

Use

JS

const image = new Image();
image.src = './image.png';
const colorCount = 4;
const algorithm = 'celebi';
await image.decode();
const dominantColors = await extractDominantColors(image, colorCount, algorithm);
console.log(dominantColors); // ['#4285f4', '#db4437', '#f4b400', '#0f9d58']