Prototype for Google + similar Feedback-Module with Html2Canvas-Screenshots with Javascript

8Aug Code Inside Team Uncategorized One comment

A main problem for every Developer is that you can’t see what the user will see. The developer from Google integrated a useful tool where you are able to mark a part of the Side and send it to Google as a screenshot. Both developer and user will have a maximum plus of Usability.

Today I found a Javascript-Framework which is able to pack the HTML in a Canvas. The name is Html2Canvas and it is still experimental and has several limitations but at least it works with many sides. Here is the testconsole:

Little downer: of course it’s not a real Screenshot but a picture of the DOM. More you can read on the developer side. And of course Html2Canvas only works it the browser supports the Canvas element.

But because of I didn’t work with the Canvas Element so far I would like to test the Google + Feedback-Modul Scenario.

Transform the Canvas into an Image and post it to the server

So I adapted the Demoside a little and integrated a ASP.NET MVC application and added a Upload-Button (and adapted the script a little bit and appointed Canvas with an ID).

The HTML Canvas Object has a Javascript-method to change it into base64 picture (the deciding tip is form this side). With AJAX the base64 image will be send to the Controller. With the Url.Action Parameter I force that the whole URL will be render because the Javascript of Html2Canvas destroys the Location of the side.

  function upload() {
                var canvas = $("#CanvasTest").get(0).toDataURL('image/jpeg');

                $.post('@Url.Action("Upload", "Home", null, "http")',
                    {
                        img: canvas
                    });
            }

Because it’s not the regular fileupload running here and because of this I can’t use the HttpPostedFileBase I need to drag and save the image manual.

 public ActionResult Upload()
        {
            string fullString = this.Request.Form["img"];
            var base64 = fullString.Substring(fullString.IndexOf(",") + 1);
            byte[] b;
            b = Convert.FromBase64String(base64);

            MemoryStream ms = new System.IO.MemoryStream(b);

            Image img = System.Drawing.Image.FromStream(ms);

            img.Save(Path.Combine(
              AppDomain.CurrentDomain.BaseDirectory, Guid.NewGuid().ToString() + ".jpg"), System.Drawing.Imaging.ImageFormat.Jpeg);

            return RedirectToAction("Index");
        }

The result is nice:

In fact my sides are not rendered quite good but almost Zwinkerndes Smiley

The images will be saved in the directory of the application.

Things we have learned:

- Html2Canvas is an interesting project

- It’s easy to post a canvas to the server

- I’ve learned something new about base64 coded images

There are a lot of things you can do with canvas so it becomes more similar with Google+.

Like I’ve already mentioned in the title: It’s just a Prototype Zwinkerndes Smiley

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

About the author

Written by Code Inside Team

Learn more about our team.

One Response

Udo
August 18, 2011

FYI, Google is also encoding the image to JPEG before sending it to the server. I say that because within all that obfuscated JavaScript code there is a clearly readable copyright notice about a (apparently free) JPEG encoder written in JavaScript by Adobe. You will find JS JPEG encoders by googling…
Reply