webassembly-image-editor

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #golang #macos #java #windows #cli #kubernetes #awesome-list #vue #security #mcp #openai

webassembly-image-editor

(★ 15)

Image Editor powered by WebAssembly and Rust

webassembly-image-editor Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# wasm-image-editor

Image Editor powered by WebAssembly and Rust.

| JavaScript | WebAssembly |
| --- | --- |
| ![Js demo](https://raw.githubusercontent.com/raphamorim/webassembly-image-editor/main/resources/javascript-demo.png) | ![Wasm demo](https://raw.githubusercontent.com/raphamorim/webassembly-image-editor/main/resources/wasm-demo.png) |

## Try it

https://raphamorim.io/webassembly-image-editor/

| Filter | WASM (best) | WASM (average) | JavaScript (best) |JavaScript (average) |
| --- | --- | --- | --- | --- |
| [Grayscale](#grayscale) | ~7ms | ~10ms | ~10ms | ~14ms |
| Sepia | WIP | WIP | WIP | WIP |

Filter suggestion? Open an issue :)

## Grayscale

#### The Weighted Method:

```
Grayscale = 0.299R + 0.587G + 0.114B
```

Example (rust with casting between f32 and u8):

```rust
let grayscale = ((pixels[i] as f32 * 0.3) + (pixels[i+1] as f32 * 0.59) + (pixels[i+2] as f32 * 0.11)) as u8;
```

#### Average Method:

```
Grayscale = (R + G + B ) / 3
```

Theoretically, the formula is 100% correct. But when writing code, you may encounter uint8 overflow error. The sum of R, G, and B is greater than 255. To avoid the exception, R, G, and B should be calculated, respectively.

```
Grayscale = R / 3 + G / 3 + B / 3
```

#### Rust:

```rust
let pixels = unsafe { from_raw_parts_mut(data as *mut u8, len) };
let mut i = 0;
loop {
    if i >= len - 1 {
        break;
    }

let grayscale = (pixels[i] / 3) + (pixels[i + 1] / 3) + (pixels[i + 2] / 3);
    pixels[i] = grayscale;
    pixels[i + 1] = grayscale;
    pixels[i + 2] = grayscale;
    i += 4;
}
```

#### Javascript:

```javascript
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels  = imageData.data;
for (var i = 0, n = pixels.length; i < n; i += 4) {
    const grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
    pixels[i] = grayscale;
    pixels[i+1] = grayscale;
    pixels[i+2] = grayscale;
}
```

webassembly-image-editor

webassembly-image-editor Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

webassembly-image-editor

webassembly-image-editor Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README