1
00:00:00,330 --> 00:00:04,320
In this lecture, we're going to apply a grayscale effect to our image.

2
00:00:04,590 --> 00:00:08,940
We loaded the image with the load from memory function, from the image crate.

3
00:00:09,240 --> 00:00:12,570
Currently, I'm looking at the documentation for this function.

4
00:00:12,870 --> 00:00:16,740
I'll provide a link to this function in the resource section of this lecture.

5
00:00:17,310 --> 00:00:22,560
According to the documentation, the load from memory function returns and image results.

6
00:00:22,920 --> 00:00:25,500
We unwrapped the result to grab the image.

7
00:00:25,800 --> 00:00:29,910
The value event for the image result is called a dynamic image.

8
00:00:30,150 --> 00:00:32,250
We can click on this tape to learn more.

9
00:00:32,880 --> 00:00:39,030
You can think of the dynamic image as an object with methods for interacting with the image on the sidebar.

10
00:00:39,060 --> 00:00:41,250
You'll come across dozens of methods.

11
00:00:41,580 --> 00:00:44,550
The method we're interested in is called grayscale.

12
00:00:47,230 --> 00:00:53,290
The description says the following returning greyscale version of this image, it's exactly what we're

13
00:00:53,290 --> 00:00:54,040
looking for.

14
00:00:54,280 --> 00:00:58,990
Looking closely at the argument list, it's going to borrow a value called self.

15
00:00:59,320 --> 00:01:03,520
You can think of the self keyword as the this keyword in JavaScript.

16
00:01:04,480 --> 00:01:07,180
It represents the value the method was called on.

17
00:01:07,360 --> 00:01:13,960
We don't need to pass on data to this method and said it'll automatically pass on the image to this

18
00:01:13,960 --> 00:01:14,410
method.

19
00:01:14,920 --> 00:01:19,090
If we look at the return value, you don't return another dynamic image.

20
00:01:19,330 --> 00:01:22,270
We should store this image after calling the function.

21
00:01:22,510 --> 00:01:23,560
Let's get started.

22
00:01:23,830 --> 00:01:26,410
Open the library file in your editor.

23
00:01:28,970 --> 00:01:34,340
In the greyscale function, we're going to add the mute keyword to the image variable.

24
00:01:36,930 --> 00:01:42,270
After calling the greyscale method, we're going to override this variable with the new image.

25
00:01:42,510 --> 00:01:46,860
We don't need the original image after transforming it afterward.

26
00:01:47,010 --> 00:01:52,290
Let's update the image variable to the following value image dot grayscale.

27
00:01:54,890 --> 00:01:57,860
Next, we're going to log the following image.

28
00:01:58,200 --> 00:02:00,020
Grayscale effect applied.

29
00:02:06,620 --> 00:02:13,580
With a single line of code, we've applied a Grace Gill effect to an image, the image crate is extremely

30
00:02:13,580 --> 00:02:14,240
powerful.

31
00:02:14,570 --> 00:02:19,730
It can perform other transformations such as resizing, cropping and blurring.

32
00:02:20,150 --> 00:02:24,140
For this demonstration, we're going to apply a single effect.

33
00:02:24,500 --> 00:02:29,330
However, you're more than free to modify this project to apply other effects.

34
00:02:29,990 --> 00:02:33,200
Let's try uploading an image with the console opened.

35
00:02:35,790 --> 00:02:38,250
Processing and image does take time.

36
00:02:38,490 --> 00:02:41,820
Once again, I recommend uploading a small file.

37
00:02:42,150 --> 00:02:49,320
Otherwise, WebAssembly may take a while to log a message to the console after you've received the message

38
00:02:49,320 --> 00:02:50,460
from WebAssembly.

39
00:02:50,610 --> 00:02:53,400
We can begin sending the image back to the user.

40
00:02:53,760 --> 00:02:56,340
Let's take this step in the next lecture.