In this lecture, we are going to begin defining a function in rust.
The job of this function will be to transform an image into a greyscale image before we get into the
heavy stuff.
We should try to log the file from rust.
At the moment, we're logging the file from JavaScript if the file can be logged from rust.
We can confirm a relationship between JavaScript and Rust.
To begin, let's open the main D.J.s file.
Search for the unload end function on the file reader object inside this function, we are logging the
base 64 variable.
Let's replace the console log function with a function called Rust APT Greyscale.
The argument can stay in place.
The rust out variable is a module like all modules we can access methods and properties exported by
the module.
You may get an error if you're running web pack in the background.
It's because we haven't defined this function.
Let's take care of that.
Open the library dot rc file.
Inside this file define a function called grey scale.
As we learned previously, we are expecting a string from JavaScript in the argument list at an argument
called encoded file.
The tape will be set to string, which will be borrowed.
We are borrowing this string because we're not going to update this string directly.
The purpose of encoding the file was to transfer it between JavaScript and Rust.
Mission accomplished.
Once we receive the file, we're going to transform it back into binary data.
Once we have the binary data, we can begin to manipulate the image.
It is possible to manipulate an image through a string.
Unfortunately, it's not ideal or common.
We're not going to go through the trouble of manipulating images with strings.
It's much easier to work with binary data.
Luckily, base64 is a highly popular encoding format.
Rust has support for decoding base 64 strings.
Before we get there, let's log the string to confirm it's been transferred.
First, we need to expose this function to JavaScript.
By default, functions are not accessible to external files.
However, we can make a function public by adding the public key word to the function.
The public key word will make a function public trust.
However, it doesn't make it public to JavaScript.
Luckily, the WebAssembly Bind Jen Crate can export functions to JavaScript above the function.
We're going to add a hash character, followed by a pair of square brackets.
I'm introducing a new feature called Macro Attributes, Attributes, or a feature for running macros
on a function.
So far, we've used macros to create values, but what if we want to apply a macro to a function definition?
We can use attributes to run macros on functions.
The name of the macro can be written inside the square brackets.
For this example, we're going to run the web assembly bind.
Jen Prelude Web Assembly Bind Jen Macro.
What a mouthful the vine gin crate exports a macro for handling the action of exporting a function to
JavaScript.
The actual macro is the Bind Gin portion of this code.
We may need to export multiple functions.
I think it would be annoying to constantly type this line.
We can shorten this line by using the use keyword at the top of the file.
Add the use keyword.
They use keyword allows us to access a specific function or macro from within a crate.
We'll be able to reference the macro by its name instead of typing the full path.
Let's copy and paste the path.
Next, we can shorten the macro to just bind, Jen.
This results in the same thing.
It's an optional step, but can make your code readable.
In some examples, you may see developers replace the Bind Gen Macro with a star character in the used
statement.
The difference is that the star character will shorten all functions and macros defined under the prelude
path.
Either solution works.
Feel free to use whichever solution you prefer.
The next step is to begin logging the encoded file.
We have two options at our disposal.
We can write the code for logging of value or we can use a crate.
I think using a crate will be easier.
You'll likely come across the crate.
I'm about to mention in the resource section of this lecture, I provide a link to a crate called Web
System.
The weapons system crate exports a set of JavaScript functions to rust, this trade is completely different
from the bind generate the buying and crate exports functions, but it does not define the functions
themselves.
We are responsible for writing the logic, whereas the web system crate exports JavaScript functions
defined by their browser.
This includes the console log function.
Let's open the cargo configuration file.
Next, at a table called Dependences Dot Web System.
Normally, dependencies can be listed under the Dependencies table.
However, cargo is a very efficient package manager.
We have the option of partially importing the features we need from a crate.
We don't need to download the entire package.
The Bind Gin Crate is lightweight, but the Webb System Crate is not.
We can specify a list of features by creating a separate table with the name of the crate appended at
the end of the table name.
Below this table, we can set the version by adding the version option.
The latest version is zero point three point four.
Next, we can add an option called features, which will be an array of features to download in this
array.
We're going to download the console feature.
The console feature will export Java Scripts console functions to our robust project.
We don't need anything else.
So let's go back to the rust file.
We can start calling.
The web system creates functions, but we should add there paths below the first use statement.
Add another one.
We're going to add the following path web system console log one.
The Web System Crate defines several logging functions.
The number refers to how many values can be launched.
For example, the long one function will log one value, the log to function will log two values, so
on and so forth.
We don't need the other log functions.
This function will suffice.
We can make our code readable by adding an alias instead of referring to the function as log one.
We can add the as keyword to create an alias.
The name of the alias will be called log.
Let's use our new function inside the greyscale function called this function with the encoded file
variable.
This function wants to borrow the string.
We'll need to add the ampersand symbol.
We're going to receive an error.
Do you understand why?
Let's hover our mouse over this function.
This function is expecting a type called juice value.
However, we're passing in a string.
Strings are not equivalent to JavaScript strings.
At the end of the day, we're calling a JavaScript function.
We need to perform type conversion after the encoded file argument SINI function called into.
This function is one of the most interesting features of rust type conversion can be performed by calling
the into function.
The new function will intelligently detect the data type where converting to it understands we're trying
to convert a string into a a.j.'s value.
There's a lot more going on, but that's the basics of things.
Let's save our file and open the browser.
I have web pack running in the background.
I will always have it running for the remainder of this course with the console opened.
I'm going to upload a file.
Wow.
We've successfully transferred the file to rust.
It's magically logging the same value we logged in our JavaScript file.
Isn't that amazing?
It's time to start transforming the image.
Let's begin transforming our images in the next lecture.