Transform Image Menjadi Grayscale Menggunakan Rust

by

Setelah selesai melakukan setup pada modul-modul sebelumnya, sekarang kita mulai melakukan coding menggunakan Rust.

Pertama kita tambahkan konfigurasi pada Cargo.toml dengan menambahkan table dependencies untuk

Perhatian: pastikan gunakan versi seperti pada konfigurai dibawah, karena ada kemungkinan error bila menggunakan versi yang berbeda.

[package]
name = "wa"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
wasm-bindgen = "0.2.81"
base64 = "0.13.0"
image = "0.23.14"

[dependencies.web-sys]
version = "0.3.58"
features= ["console"]

Buka file src/lib.rs, ubah code seperti berikut:

use wasm_bindgen::prelude::*;
use web_sys::console::log_1 as log; // web_sys untuk melakukan console log ke browser
use base64::{ encode, decode };
use image::load_from_memory;
use image::ImageOutputFormat::Png;

#[wasm_bindgen]
pub fn grayscale(encoded_file: &str) -> String {
  // fungsi loging ke console
  log(&"Grayscale called".into()); 

  // fungsi decode base64
  let base64_to_vector = decode(encoded_file).unwrap(); 
  log(&"Image decoded".into());

  // fungsi load image
  let mut img = load_from_memory(&base64_to_vector).unwrap(); 
  log(&"Image loaded".into());

  //proses mengubah menjadi grayscale
  img = img.grayscale();
  log(&"Grayscale effect applied".into());

  let mut buffer = vec![];
  img.write_to(&mut buffer, Png).unwrap();
  log(&"New image written".into());

  let encoded_img = encode(&buffer);
  let data_url = format!(
    "data:image/png;base64,{}",
    encoded_img
  );

  data_url
}

Jalankan webpack dengan perintah

$ npm run serve

Kemudian buka browser, masukan image png. Sesuai ekspektasi, image color akan diconvert menjadi grayscale. Dan proses cukup cepat karena digunakan wasm.

Sharing is caring:

Leave a Comment