Upload HTML5 canvas to server using ASP.NET Core

On the client side, we use this method to.DataURL(). The method will method returns a data URI containing a representation of the image.

The data URI will look something like this:

Now, we can “post” the data URI to our asp.net controller. When the controller received the data, we can save it to the server using the following snippet.

First, we need to “decode” the data URI. If you notice value of data URI, it contains the mediatype and the encode type, ┬ádata:image/png;base64. We are not interested in this data so we do a split and retrieve only the base64 data.

Lastly, we open up a filestream object and use binarywriter to convert the base64 data to byte array.

That’s it! Happy coding!


Leave a Reply

Your email address will not be published. Required fields are marked *