1
00:00:00,150 --> 00:00:05,970
In this lecture, we're going to finish our app by rendering the image in the browser before we get

2
00:00:05,970 --> 00:00:06,840
into the code.

3
00:00:07,050 --> 00:00:10,470
I want to take this moment to review the overall process.

4
00:00:10,740 --> 00:00:13,770
We've been performing various actions on the image.

5
00:00:14,040 --> 00:00:16,440
Let's review everything we've done thus far.

6
00:00:17,040 --> 00:00:20,880
Everything begins with JavaScript in our JavaScript file.

7
00:00:20,910 --> 00:00:23,250
We're accepting an object called file.

8
00:00:23,490 --> 00:00:26,250
It represents the file uploaded by the user.

9
00:00:26,580 --> 00:00:30,720
We decided to convert this object into a base 64 string.

10
00:00:31,230 --> 00:00:34,920
This is because it's easier to send file data as strings.

11
00:00:35,450 --> 00:00:39,540
Afterward, we send this string to Rust's in our US file.

12
00:00:39,570 --> 00:00:42,360
We decoded this string into binary data.

13
00:00:42,690 --> 00:00:46,380
This binary data was given to a create called image.

14
00:00:46,770 --> 00:00:50,610
The image create will create a wrapper called dynamic image.

15
00:00:51,150 --> 00:00:54,420
This wrapper has methods for interacting with the image.

16
00:00:54,630 --> 00:00:58,440
We applied a grayscale effect to the image through this wrapper.

17
00:00:58,980 --> 00:01:04,290
At this point, we need to reverse the chain by converting the image into binary data.

18
00:01:04,590 --> 00:01:09,450
Next, we need to convert the binary data into a base 64 string.

19
00:01:10,170 --> 00:01:16,110
The string will be given back to JavaScript from their JavaScript can render the image.

20
00:01:16,440 --> 00:01:18,690
Let's begin taking the final steps.

21
00:01:19,980 --> 00:01:24,030
We'll continue working on the to file in an earlier lecture.

22
00:01:24,180 --> 00:01:27,780
We imported the base 64 crates to decode a strain.

23
00:01:28,200 --> 00:01:31,170
It exports a function for encoding in value.

24
00:01:31,470 --> 00:01:32,520
Let's import it.

25
00:01:33,070 --> 00:01:38,310
There's a cool trick for grabbing multiple functions from a single use statements.

26
00:01:38,670 --> 00:01:42,420
We can replace this portion of these statements with curly brackets.

27
00:01:44,900 --> 00:01:48,800
Inside these brackets, we can write a list of functions to import.

28
00:01:49,100 --> 00:01:52,940
We're interested in two functions called encode and Decode.

29
00:01:55,440 --> 00:01:58,290
Let's scroll to the bottom of the greyscale function.

30
00:01:58,620 --> 00:02:02,220
We're going to create a variable called encoded image.

31
00:02:02,580 --> 00:02:06,450
Its value will be the encode function with the buffer variable.

32
00:02:06,750 --> 00:02:08,940
This function will borrow the variable.

33
00:02:11,520 --> 00:02:15,690
The value returned by the function will be a base 64 string.

34
00:02:16,110 --> 00:02:20,230
We're going to modify the string by converting it into a data URL.

35
00:02:20,520 --> 00:02:29,100
If you can recall, JavaScript creates a data URL, add a URL, contains metadata and a base 64 string.

36
00:02:29,550 --> 00:02:32,760
We removed the metadata in our JavaScript file.

37
00:02:33,090 --> 00:02:37,590
We should add this metadata to the string to have a full data URL.

38
00:02:38,160 --> 00:02:42,030
Rust has a macro called format for manipulating strings.

39
00:02:42,360 --> 00:02:49,410
It's very similar to the print macro, except it'll return a string instead of printing a string below

40
00:02:49,410 --> 00:02:53,400
the variable, create another variable called data URL.

41
00:02:53,730 --> 00:02:56,130
Its value will be the format macro.

42
00:02:58,780 --> 00:03:02,140
The first argument will be the following value data.

43
00:03:02,200 --> 00:03:07,930
Colon image slash, PMG, semi-colon, base64 comma.

44
00:03:10,440 --> 00:03:13,710
Next, let's add a placeholder at the end of a string.

45
00:03:16,280 --> 00:03:20,270
Lastly, we will pass in the encoded image variable.

46
00:03:22,760 --> 00:03:25,190
The last step is to return this train.

47
00:03:27,780 --> 00:03:34,200
Rice will throw an error because the return type is not specified at the top of the function, set the

48
00:03:34,200 --> 00:03:35,820
return type to string.

49
00:03:38,480 --> 00:03:40,400
There are two types of strings.

50
00:03:40,610 --> 00:03:44,530
If we're borrowing a string, the type must be ACR.

51
00:03:44,840 --> 00:03:48,650
If we have ownership of a string, the type must be string.

52
00:03:49,040 --> 00:03:51,950
It's a small difference, but something to keep in mind.

53
00:03:52,340 --> 00:03:53,720
Our function is complete.

54
00:03:53,990 --> 00:03:58,400
We can start rendering the image open the main D.J.s file.

55
00:04:00,790 --> 00:04:07,570
Scroll to the Unload end function in this function, we're calling the greyscale function we should

56
00:04:07,570 --> 00:04:07,930
store.

57
00:04:07,930 --> 00:04:14,790
The Earl returned by this function assign the value to a variable called image data URL.

58
00:04:17,370 --> 00:04:24,690
We're not going to convert the encoded string into a file object, browsers support base 64 images.

59
00:04:25,020 --> 00:04:27,810
We can use this URL to render an image.

60
00:04:28,140 --> 00:04:32,370
The browser will decode the image on our behalf in our documents.

61
00:04:32,520 --> 00:04:33,980
We have an image shank.

62
00:04:34,260 --> 00:04:38,850
Let's select it with the document dont gets element by ID function.

63
00:04:39,270 --> 00:04:42,510
The ID of the image is called new image.

64
00:04:45,470 --> 00:04:52,100
We will want to find the source attribute with this set attribute function, the value for this attribute

65
00:04:52,100 --> 00:04:53,520
will be the image data.

66
00:04:53,570 --> 00:04:54,920
You are real variable.

67
00:04:59,030 --> 00:05:00,680
Voila, we're finished.

68
00:05:00,920 --> 00:05:04,400
We've successfully created our first Web assembly app.

69
00:05:04,610 --> 00:05:07,770
Let's give our app one final tests in the browser.

70
00:05:07,820 --> 00:05:09,380
Try uploading an image.

71
00:05:11,960 --> 00:05:15,200
After a few seconds, the image has been processed.

72
00:05:15,500 --> 00:05:20,090
It has been converted from a colored image to a grayscale image.

73
00:05:20,480 --> 00:05:26,000
Hopefully, this project gives you an idea of how WebAssembly can change the world.

74
00:05:26,360 --> 00:05:29,480
It's a very powerful tool for building web apps.

75
00:05:29,750 --> 00:05:32,540
It's a completely different but fun world.

76
00:05:33,170 --> 00:05:37,610
In the next lecture, we're going to show our app to the world by deploying it.

77
00:05:37,910 --> 00:05:38,990
I'll see you there.