Update HTTP ExampleWebsite

[ferib]

Replaced form POST request with ajax POST request Added CSS animation while waiting for request to complete AND animation to fade out mask (for dramatic effect hehe)

TODO: Handle ajax POST return correctly (cannot get image extracted from return) Fix image box sizing

[zavolokas]

Replaced form POST request with ajax POST request Added CSS animation while waiting for request to complete AND animation to fade out mask (for dramatic effect hehe)

TODO: Handle ajax POST return correctly (cannot get image extracted from return) Fix image box sizing

The animation looks awesome! 😃
I took a look at your current TODOs and posted a couple of suggestions to tackle them.

The most trickiest part for now is to return an image in base64 encoded format. Give me a shout if you will struggle with that ;)

[ferib]

Replaced form POST request with ajax POST request Added CSS animation while waiting for request to complete AND animation to fade out mask (for dramatic effect hehe) TODO: Handle ajax POST return correctly (cannot get image extracted from return) Fix image box sizing

The animation looks awesome! 😃 I took a look at your current TODOs and posted a couple of suggestions to tackle them.

The most trickiest part for now is to return an image in base64 encoded format. Give me a shout if you will struggle with that ;)

The image response doesn't look like an image at all to me? there is no "PNG" in the first few chars/bytes when the result is printed (as text) in the console. The issues should be converting it to Base64, but the result is not even a valid image?

[zavolokas]

The image response doesn't look like an image at all to me? there is no "PNG" in the first few chars/bytes when the result is printed (as text) in the console. The issues should be converting it to Base64, but the result is not even a valid image?

Before you return the image bytes, you can save the final image into a stream in PNG format and return bytes from the stream - then you will see PNG(part of png header) in the printed result in the console.

In order to get what you want working you need to encode these bytes with base64. Then you will see it's working, then you can remove the part of saving into PNG format and it sill will work :-D Browser is smart enough to understand actual image encoding that is used.

[ferib]

Okay, couldn't figure out how to do it in JS, so instead, i changed the following lines of code:

//Stream stream = new MemoryStream(finalResult.GetBytes());
//return this.Response.FromStream(stream, "image/png");
return Convert.ToBase64String(finalResult.GetBytes());

This does work, not sure if this is the best way to do so, since base64 is bigger in size then the bytes are.

[zavolokas]

Okay, couldn't figure out how to do it in JS, so instead, i changed the following lines of code:

//Stream stream = new MemoryStream(finalResult.GetBytes());
//return this.Response.FromStream(stream, "image/png");
return Convert.ToBase64String(finalResult.GetBytes());

This does work, not sure if this is the best way to do so, since base64 is bigger in size then the bytes are.

That is exactly what needs to be done. Base64 encoded image is required because it is set as a value directly into the HTML. There is no way to do that other way because the bytes converted to text representation will contain symbols that are not allowed within HTML. So, well done 👍

[ferib]

Attempted to add a canvas, which should be used to draw a mask on top of the image (instead of uploading a existing mask). Little buggy, width/height doesn't match, but it functions.

[zavolokas]

Attempted to add a canvas, which should be used to draw a mask on top of the image (instead of uploading a existing mask). Little buggy, width/height doesn't match, but it functions.

Wow! Cool! 👍 Small note - new functionality could be a separate PR. It is also a good practice to add new functionality in small granular PRs rather than many features in one 😉

[ferib]

Attempted to add a canvas, which should be used to draw a mask on top of the image (instead of uploading a existing mask). Little buggy, width/height doesn't match, but it functions.

Wow! Cool! 👍 Small note - new functionality could be a separate PR. It is also a good practice to add new functionality in small granular PRs rather than many features in one 😉

Oh yeah good thing to seperate, but on the other side i didn't want to spam with PR's haha. Gonna remove the last new feature and open a new PR then.

[ferib]

Fixed merge issues 😄