In this lecture, we're going to finish our app by rendering the image in the browser before we get
into the code.
I want to take this moment to review the overall process.
We've been performing various actions on the image.
Let's review everything we've done thus far.
Everything begins with JavaScript in our JavaScript file.
We're accepting an object called file.
It represents the file uploaded by the user.
We decided to convert this object into a base 64 string.
This is because it's easier to send file data as strings.
Afterward, we send this string to Rust's in our US file.
We decoded this string into binary data.
This binary data was given to a create called image.
The image create will create a wrapper called dynamic image.
This wrapper has methods for interacting with the image.
We applied a grayscale effect to the image through this wrapper.
At this point, we need to reverse the chain by converting the image into binary data.
Next, we need to convert the binary data into a base 64 string.
The string will be given back to JavaScript from their JavaScript can render the image.
Let's begin taking the final steps.
We'll continue working on the to file in an earlier lecture.
We imported the base 64 crates to decode a strain.
It exports a function for encoding in value.
Let's import it.
There's a cool trick for grabbing multiple functions from a single use statements.
We can replace this portion of these statements with curly brackets.
Inside these brackets, we can write a list of functions to import.
We're interested in two functions called encode and Decode.
Let's scroll to the bottom of the greyscale function.
We're going to create a variable called encoded image.
Its value will be the encode function with the buffer variable.
This function will borrow the variable.
The value returned by the function will be a base 64 string.
We're going to modify the string by converting it into a data URL.
If you can recall, JavaScript creates a data URL, add a URL, contains metadata and a base 64 string.
We removed the metadata in our JavaScript file.
We should add this metadata to the string to have a full data URL.
Rust has a macro called format for manipulating strings.
It's very similar to the print macro, except it'll return a string instead of printing a string below
the variable, create another variable called data URL.
Its value will be the format macro.
The first argument will be the following value data.
Colon image slash, PMG, semi-colon, base64 comma.
Next, let's add a placeholder at the end of a string.
Lastly, we will pass in the encoded image variable.
The last step is to return this train.
Rice will throw an error because the return type is not specified at the top of the function, set the
return type to string.
There are two types of strings.
If we're borrowing a string, the type must be ACR.
If we have ownership of a string, the type must be string.
It's a small difference, but something to keep in mind.
Our function is complete.
We can start rendering the image open the main D.J.s file.
Scroll to the Unload end function in this function, we're calling the greyscale function we should
store.
The Earl returned by this function assign the value to a variable called image data URL.
We're not going to convert the encoded string into a file object, browsers support base 64 images.
We can use this URL to render an image.
The browser will decode the image on our behalf in our documents.
We have an image shank.
Let's select it with the document dont gets element by ID function.
The ID of the image is called new image.
We will want to find the source attribute with this set attribute function, the value for this attribute
will be the image data.
You are real variable.
Voila, we're finished.
We've successfully created our first Web assembly app.
Let's give our app one final tests in the browser.
Try uploading an image.
After a few seconds, the image has been processed.
It has been converted from a colored image to a grayscale image.
Hopefully, this project gives you an idea of how WebAssembly can change the world.
It's a very powerful tool for building web apps.
It's a completely different but fun world.
In the next lecture, we're going to show our app to the world by deploying it.
I'll see you there.