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

08 August 2011 CI Team

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.

image

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:

image

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).

image1305

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:

image

In fact my sides are not rendered quite good but almost.

image

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.