![\"Youtube-Feedback\"](\"https:\/\/d-mueller.de\/blog\/wp-content\/uploads\/2012\/10\/Youtube-Feedback.png\" "\\"Youtube-Feedback\\"")
<\/a>Youtube-Feedback<\/p><\/div>\n
Durch das Projekt html2canvas<\/a> l\u00e4sst sich nun sowas ganz ohne Flash l\u00f6sen: Es wird in einem Canvas das DOM der Seite rekonstruiert und dann mittels der Funktion canvas.toDataURL()<\/i> ein Datenstream erstellt, der sich dann mit Hilfe eines serverseitigen Scripts in ein vollwertiges Bild umwandeln l\u00e4sst. Aber der Reihe nach.<\/p>\n Logischerweise brauchen wir jQuery, ein Plugin f\u00fcr html2canvas von der Github-Seite des Projekts<\/a> und die eigentliche Library. Der Body ist unser Testcontent, den wir screenshotten wollen. Inhalt des Scripts makeScreenshot.js<\/b>:<\/p>\n Basierend auf einigen halbgaren Stackoverflow-Antworten (hier<\/a>, hier<\/a> und hier<\/a>) erstellt die Funktion postCanvasToUrl<\/i> die Data-URL des Canvas im korrekten multipart\/form-data<\/i>-Format als Boundary an das PHP-Script post.php. Mehr passiert nicht. Auf der Serverseite liegt dann die Datei post.php<\/b>, die den XHR-Request entgegennimmt und besch\u00e4mend einfach aufgebaut ist:<\/p>\n Wir verschieben einfach nur die Datei, die uns postCanvasToURL<\/i> im $_FILES – Array serviert – wie bei einem normalen File-Upload eben. Resultat ist das optisch \u00fcber jeden Zweifel erhabene Bild:<\/p>\n html2canvas-Output<\/p><\/div>\n Super Projekt auf jeden Fall! Zu beachten gilt, dass der Browser nat\u00fcrlich Canvas k\u00f6nnen sollte und der „Screenshot“ in einigen F\u00e4llen nicht ganz akkurat ist. Auf der Testkonsole<\/a> l\u00e4sst sich hervorragend herumexperimentieren.<\/p>\n","protected":false},"excerpt":{"rendered":" Auf einigen Webseiten wird dem Nutzer die M\u00f6glichkeit geboten, Feedback zu geben. Bei Youtube l\u00e4uft das bspw. so, dass man als „feedbackwilliger“ Nutzer einen Bereich der Webseite markiert und diesen dann kommentieren kann. Nachzuvollziehen ist das \u00fcber den versteckt im … Weiterlesen Das Setup<\/h2>\n
\r\n<!doctype html>\r\n<head>\r\n\t<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js"><\/script>\r\n\t<script src="https:\/\/raw.github.com\/niklasvh\/html2canvas\/master\/src\/plugins\/jquery.plugin.html2canvas.js"><\/script>\r\n\t<script src="http:\/\/html2canvas.hertzen.com\/js\/html2canvas.js?rev034"><\/script>\r\n\t<script src="makeScreenshot.js"><\/script>\r\n<\/head>\r\n<body>\r\n\t<div style="width:500px;height:300px;background:red;border:5px solid yellow">\r\n\t\t<h1 style="color:green">Das ist ein Test<\/h1>\r\n\t<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\r\nfunction postCanvasToURL(data) \r\n{\r\n\tdata = data.replace('data:image\/png;base64,', '');\r\n\tvar xhr = new XMLHttpRequest();\r\n\txhr.open('POST', "post.php", true);\r\n\tvar boundary = 'this-is-a-string';\r\n\txhr.setRequestHeader('Content-Type', 'multipart\/form-data; boundary=' + boundary);\r\n\trequest_str = '--' + boundary + '\\r\\n' + 'Content-Disposition: form-data; name="formelement"; filename="image.png"' + '\\r\\n' +\r\n\t\t\t\t 'Content-Type: image\/png' + '\\r\\n\\r\\n' + atob(data) + '\\r\\n' + '--' + boundary + '--';\r\n\r\n\tvar bytes = [];\r\n\r\n\tfor (var i in request_str)\r\n\t{\r\n\t\tbytes.push(request_str[i].charCodeAt(0) & 0xff);\r\n\t}\r\n\r\n\txhr.send(new Uint8Array(bytes).buffer);\r\n}\r\n\r\n$(window).ready(function()\r\n{\r\n\tvar options = {onrendered : function(canvas) { postCanvasToURL(canvas.toDataURL()); }};\r\n\tvar canvasRecord = $('body').html2canvas(options);\r\n});\r\n<\/pre>\n\r\n<?php\r\nmove_uploaded_file($_FILES['formelement']['tmp_name'], $_FILES['formelement']['name']);\r\n<\/pre>\n
<\/a>