Prototyp für Google+ ähnliches Feedback-Modul mit Html2Canvas–Screenshots mit Javascript

Häufig gibt es das Problem, dass man als Entwickler nicht wirklich weiß, was der Benutzer sieht. Die Google+ Entwickler haben daher ein schickes Feedback-Modul integriert, indem man selber ein Bereich der Seite markieren kann und dies als Screenshot zu Google schicken kann. Sowohl für den Benutzer als auch für den Entwickler hinterher ist das ein echter Usability Gewinn.

Heute bin ich durch Zufall auf ein Javascript-Framework gestoßen, welche das HTML in ein Canvas packt. Das ganze nennt sich Html2Canvas und ist noch experimentell und hat einige Einschränkungen, funktioniert aber mit einigen Seiten. Hier die Testkonsole:

Wichtig: Hierbei werden die Bilder clientseitig erzeugt, anders als z.B. über diese Variante welche das Bild “serverseitig” erzeugt.

Kleiner Wermutstropfen: Es wird natürlich kein echter Screenshot gemacht, sondern es wird anhand der DOM ein Abbild geschaffen. Mehr dazu kann man auf der Entwicklerseite nachlesen. Natürlich funktioniert Html2Canvas auch nur, wenn der Browser das Canvas Element unterstützt.

Da ich bislang noch nie was mit dem Canvas Element gemacht habe, fand ich aber das Google+ Feedback-Modul ein interessantes Szenario.

Das Canvas als Image umwandeln und zum Server posten

Ich hab also die Demoseite etwas angepasst und in eine ASP.NET MVC Anwendung integriert und ein Upload-Button hinzugefügt (und das Script ein wenig angepasst und das Canvas mit einer ID ausgestattet).

Das HTML Canvas Objekt verfügt eine Javascript-Methode um es in base64 umzuwandeln (entscheidender Tipp kam von hier). Über AJAX wird nun dieses base64 Bild an den Controller gesendet. Über die zusätzlichen Url.Action Parameter erzwinge ich nur, dass die vollstänige URL gerendert wird, weil das Javascript vom Html2Canvas die Location der Seite “vermurkst”.

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

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

Da hier nicht der reguläre Fileupload genutzt wird und ich deswegen nicht das HttpPostedFileBase nutzen kann, muss ich manuell das Bild aus den Form Daten holen und speichern.

        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");
        }

Das Resultat ist doch schon mal nett:

Allerdings wird meine Seite nicht richtig gerendert, aber immerhin fast

Die Bilder werden im Verzeichnis der Anwendung abgespeichert.

Gelernte Dinge:

- Html2Canvas ist eine spannendes Projekt

- Ein Canvas kann man leicht zum Server posten

- Ich hab mal wieder was über base64 codierte Bilder gelernt.

Mit dem Canvas kann man natürlich noch viel mehr machen, sodass es wirklich Google+ ähnlich wird.

Wie bereits im Titel gesagt: Es ist nur ein Prototyp

[ Download Democode ]

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

4 Responses

1. 

   irfancue

   28. July 2011

   Das ist mal ein richtig guter Beitrag. Werde den Democode direkt mal testen. Bitte um Benachrichtigung wenn Updates vorhanden sind.

   Reply
2. 

   irfancue

   28. July 2011

   Ich hab noch eine andere Frage. Ist es bei dieser Variante auch möglich, zusätzlich zum Screenshot, die Koordinaten des Screenshots zu übermitteln? Diese würde ich dann gerne per Ajax in einer Datenbank ablegen, die Screenshots abspeichern und folgendes Tool im Backend möglich machen: Eine Art Page-Map, welche die Koordinaten bündelt und so darstellt, dass man erkennt zu welchen Bereiche der jeweiligen Seite am häufigsten (klassische Heatmap) Feedbacks erstellt wurden. Bei tausenden Usern kann man ja schlecht jedes einzelne Bild analysieren und jedes Feedback lesen.

   Reply
   • 

     Robert Mühsig

     28. July 2011

     Möglich ist das natürlich auch. Die Bibliothek macht am Ende nur ein Bildchen von der gesamten Seite. Man kann das allerdings anpassen (siehe letzten Link zum Canvas), aber hier muss man noch etwas Javascript Magie betreiben
     Bei der $.post Methode kannst du natürlich noch weitere Parameter mit hinterlegen, wie z.B. die aktuelle URL etc.
     Müsste also alles möglich sein, wenn ich dich richtig verstanden habe.

     Reply
3. 

   Torben Brodt

   8. August 2011

   Klasse Beitrag! Als Nicht-.NET Entwickler kann ich schon allein von der Kenntnis profitieren, dass es etwas wie htmlcanvas +jquery plugin +base64 upload gibt. So werde meine eigene Version bauen, danke.

   Reply