In this lecture, we're going to apply a grayscale effect to our image.
We loaded the image with the load from memory function, from the image crate.
Currently, I'm looking at the documentation for this function.
I'll provide a link to this function in the resource section of this lecture.
According to the documentation, the load from memory function returns and image results.
We unwrapped the result to grab the image.
The value event for the image result is called a dynamic image.
We can click on this tape to learn more.
You can think of the dynamic image as an object with methods for interacting with the image on the sidebar.
You'll come across dozens of methods.
The method we're interested in is called grayscale.
The description says the following returning greyscale version of this image, it's exactly what we're
looking for.
Looking closely at the argument list, it's going to borrow a value called self.
You can think of the self keyword as the this keyword in JavaScript.
It represents the value the method was called on.
We don't need to pass on data to this method and said it'll automatically pass on the image to this
method.
If we look at the return value, you don't return another dynamic image.
We should store this image after calling the function.
Let's get started.
Open the library file in your editor.
In the greyscale function, we're going to add the mute keyword to the image variable.
After calling the greyscale method, we're going to override this variable with the new image.
We don't need the original image after transforming it afterward.
Let's update the image variable to the following value image dot grayscale.
Next, we're going to log the following image.
Grayscale effect applied.
With a single line of code, we've applied a Grace Gill effect to an image, the image crate is extremely
powerful.
It can perform other transformations such as resizing, cropping and blurring.
For this demonstration, we're going to apply a single effect.
However, you're more than free to modify this project to apply other effects.
Let's try uploading an image with the console opened.
Processing and image does take time.
Once again, I recommend uploading a small file.
Otherwise, WebAssembly may take a while to log a message to the console after you've received the message
from WebAssembly.
We can begin sending the image back to the user.
Let's take this step in the next lecture.