alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Activity

multi palette support #9

Merged
CrispyBaguette merged 5 commits from multi-palette-support into master 2021-12-13 22:15:12 +00:00
Conversation 0 Commits 5 Files Changed 9 +134 -77
9 changed files with 134 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -2,23 +2,4 @@
Go+Wasm image palette converter
Build with:
```bash
GOOS=js GOARCH=wasm go build -o dist/main.wasm .
```
Access with:
```
cd dist
npx http-server
```
A version is also available on IPFS:
```
/ipfs/Qmdnx5vkt8qietF5BkEDTwxZUFKkh5g7FwYv1CgXYhQV1o
```
You can access it directly [here](https://ipfs.io/ipfs/Qmdnx5vkt8qietF5BkEDTwxZUFKkh5g7FwYv1CgXYhQV1o/).
You can access it directly [here](http://paletteswitcher.bruyant.xyz), preferably using [IPFS](https://ipfs.io/).

5
client/public/index.html
View File

@ -5,10 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta name="description" content="Go+Wasm image dithering tool" />
<link
rel="apple-touch-icon"
href="%PUBLIC_URL%/android-chrome-192x192.png"

20
client/src/App.tsx
View File

@ -4,6 +4,7 @@ import ImageOutput from "./ImageOutput";
import Ditherer from "./lib/Ditherer";
import ImagePreview from "./ImagePreview";
import Header from "./Header";
import Palette from "./Palette";
enum AppState {
NO_IMAGE,
@ -16,13 +17,13 @@ function App() {
const [ditheredImage, setDitheredImage] = React.useState<Blob>();
const [appState, setAppState] = React.useState<AppState>(AppState.NO_IMAGE);
const handleImageSubmit = async (data: Blob) => {
const handleImageSubmit = async (data: Blob, palette: Palette) => {
setBaseImage(data);
setAppState(AppState.IMAGE_LOADED);
try {
const imageArray = new Uint8ClampedArray(await data.arrayBuffer());
const ditheredImage = await new Ditherer().dither(imageArray);
const ditheredImage = await new Ditherer().dither(imageArray, palette);
setDitheredImage(new Blob([ditheredImage], { type: "image/png" }));
setAppState(AppState.IMAGE_PROCESSED);
} catch (e) {
@ -34,20 +35,19 @@ function App() {
return (
<div className="bg-nord-6 text-nord-0 min-h-screen">
<Header />
<main className="container mx-auto">
<article className="max-w-prose mx-auto pb-5 px-2">
<main className="container mx-auto pb-5">
<article className="text-xl leading-relaxed max-w-prose space-y-2 mx-auto pb-5 px-2">
<h1 className="text-3xl text-center pb-3">
Go+Wasm image dithering tool
</h1>
<aside className="text-xl text-center pb-3">
Featuring the Nord Color Palette
</aside>
<p>
Load an image, click Go and wait (potentially for a while) for the
image to be processed using the Floyd-Steinberg algorithm.
Load an image, select a palette, click Go and wait for the image to
be processed using the Floyd-Steinberg algorithm.
</p>
<p>
WebAssembly might run out of memory when processing larger images.
The preview image is scaled using the nearest-neighbor algorithm,
which might cause artifacts in some cases. Download the image for
the best experience.
</p>
</article>
<ImageInput onImageSubmit={handleImageSubmit}></ImageInput>

26
client/src/ImageInput.tsx
View File

@ -1,11 +1,13 @@
import React, { FormEventHandler } from "react";
import Palette, { palettes } from "./Palette";
interface Props {
onImageSubmit: (image: Blob) => void;
onImageSubmit: (image: Blob, palette: Palette) => void;
}
function ImageInput({ onImageSubmit }: Props) {
const fileInputRef = React.useRef<HTMLInputElement>(null);
const [paletteIndex, setPaletteIndex] = React.useState(0);
const handleSubmit: FormEventHandler = (e) => {
e.preventDefault();
@ -17,7 +19,11 @@ function ImageInput({ onImageSubmit }: Props) {
return;
}
onImageSubmit(fileInputRef.current.files[0]);
onImageSubmit(fileInputRef.current.files[0], palettes[paletteIndex]);
};
const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setPaletteIndex(parseInt(event.target.value));
};
return (
@ -34,12 +40,20 @@ function ImageInput({ onImageSubmit }: Props) {
className="block w-full mt-1 text-sm text-nord-0 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-nord-4 file:text-nord-0 hover:file:bg-nord-5"
/>
</label>
{/* <label>
<label>
<span className="block">Select a color palette:</span>
<select className="form-select block w-full mt-1">
<option value="nord">Nord</option>
<select
value={paletteIndex}
onChange={handlePaletteChange}
className="form-select block w-full mt-1"
>
{palettes.map((palette, i) => (
<option key={i} value={i}>
{palette.label}
</option>
))}
</select>
</label> */}
</label>
<button
type="submit"
value="Go"

10
client/src/ImageOutput.tsx
View File

@ -9,10 +9,10 @@ interface OutputProps {
function ImageOutput({ imageData }: OutputProps) {
const imageUrl = URL.createObjectURL(imageData);
useEffect(() => {
return () => {
useEffect(() => {
return () => {
URL.revokeObjectURL(imageUrl);
}
};
}, [imageUrl]);
const handleClick = () => {
@ -21,11 +21,11 @@ function ImageOutput({ imageData }: OutputProps) {
};
return (
<div className="mx-auto">
<div className="max-w-4xl mx-auto">
<img
alt="dithering output"
src={imageUrl}
className="object-contain max-h-96 max-w-96 mx-auto"
className="object-cover min-w-[70%] my-4 px-2 mx-auto"
/>
<button
onClick={handleClick}

10
client/src/ImagePreview.tsx
View File

@ -7,18 +7,18 @@ interface ImagePreviewProps {
function ImagePreview({ imageData }: ImagePreviewProps) {
const imageUrl = URL.createObjectURL(imageData);
useEffect(() => {
return () => {
useEffect(() => {
return () => {
URL.revokeObjectURL(imageUrl);
}
};
}, [imageUrl]);
return (
<div className="blur-sm mx-auto">
<div className="blur-sm max-w-4xl mx-auto">
<img
alt="preview"
src={imageUrl}
className="object-contain max-h-96 max-w-96 mx-auto"
className="object-cover min-w-[70%] my-4 px-2 mx-auto"
/>
</div>
);

68
client/src/Palette.ts Normal file
View File

@ -0,0 +1,68 @@
class Palette {
colors: string[];
label: string;
constructor(label: string, colors: string[]) {
this.label = label;
this.colors = colors;
}
}
const nord = new Palette("Nord", [
"2e3440",
"3b4252",
"434c5e",
"4c566a",
"d8dee9",
"e5e9f0",
"eceff4",
"8fbcbb",
"88c0d0",
"81a1c1",
"5e81ac",
"bf616a",
"d08770",
"ebcb8b",
"a3be8c",
"b48ead",
]);
const monokai = new Palette("Monokai", [
"2e2e2e",
"797979",
"d6d6d6",
"e5b567",
"b4d273",
"e87d3e",
"9e86c8",
"b05279",
"6c99bb",
]);
const grayScale1bit = new Palette("Gray Scale 1 bit (Black & White)", [
"000000",
"ffffff",
]);
const grayScale2bits = new Palette("Gray Scale 2 bits", [
"000000",
"676767",
"b6b6b6",
"ffffff",
]);
let grayColors: string[] = [];
for (let i = 0; i < 256; i++) {
const hexValue = i.toString(16).padStart(2, "0");
grayColors.push(`${hexValue}${hexValue}${hexValue}`);
}
const grayScale8bits = new Palette("Gray Scale 8 bits", grayColors);
export const palettes = [
nord,
monokai,
grayScale1bit,
grayScale2bits,
grayScale8bits,
];
export default Palette;

9
client/src/lib/Ditherer.ts
View File

@ -1,9 +1,14 @@
import Palette from "../Palette";
class Ditherer {
async dither(image: Uint8ClampedArray): Promise<Uint8ClampedArray> {
async dither(
image: Uint8ClampedArray,
palette: Palette
): Promise<Uint8ClampedArray> {
const worker: any = await wasmWorker("./main.wasm");
let output: Uint8ClampedArray;
try {
output = await worker.dither(image);
output = await worker.dither(image, palette.colors);
} finally {
worker.terminate();
}

42
src/wasm.go
View File

@ -15,25 +15,6 @@ import (
"github.com/makeworld-the-better-one/dither/v2"
)
var nordPalette, _ = buildPalette([]string{
"2e3440",
"3b4252",
"434c5e",
"4c566a",
"d8dee9",
"e5e9f0",
"eceff4",
"8fbcbb",
"88c0d0",
"81a1c1",
"5e81ac",
"bf616a",
"d08770",
"ebcb8b",
"a3be8c",
"b48ead",
})
func buildPalette(pal []string) (color.Palette, error) {
var palette = make(color.Palette, len(pal))
@ -53,9 +34,9 @@ func buildPalette(pal []string) (color.Palette, error) {
return palette, nil
}
func ditherImage(img image.Image) image.Image {
func ditherImage(img image.Image, palette color.Palette) image.Image {
// Build ditherer
ditherer := dither.NewDitherer(nordPalette)
ditherer := dither.NewDitherer(palette)
ditherer.Matrix = dither.FloydSteinberg
dst := ditherer.Dither(img)
@ -79,9 +60,9 @@ func Dither() js.Func {
imageBytes := make([]byte, args[0].Length())
js.CopyBytesToGo(imageBytes, args[0])
handler := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
resolve := args[0]
reject := args[1]
handler := js.FuncOf(func(promiseThis js.Value, promiseArgs []js.Value) interface{} {
resolve := promiseArgs[0]
reject := promiseArgs[1]
go func() {
errorConstructor := js.Global().Get("Error")
@ -94,10 +75,21 @@ func Dither() js.Func {
reject.Invoke(errorObject)
}
// Build palette
colors := make([]string, args[1].Length())
for i := 0; i < args[1].Length(); i++ {
colors[i] = args[1].Index(i).String()
}
palette, err := buildPalette(colors)
if err != nil {
errorObject := errorConstructor.New(err.Error())
reject.Invoke(errorObject)
}
// Perform dithering
log.Println("Dithering image...")
t1 := time.Now()
ditheredImage := ditherImage(img)
ditheredImage := ditherImage(img, palette)
t2 := time.Now()
log.Printf("Image dithered in %v\n", t2.Sub(t1))