![\"Meme-Generator](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/10\/canvas-meme-generator.png\")
<\/a><\/p>\n<\/p>\n
Bei unserem Memegenerator werden wir ein beliebiges Bild oder Foto ausw\u00e4hlen k\u00f6nnen und anschlie\u00dfend zwei Textbereiche individuell mit Hilfe von ein paar Slider-Elementen darauf ausrichten.<\/p>\n
Nachdem wir hier nur mit Javascript arbeiten, ist f\u00fcr die Grundfunktionalit\u00e4t auch kein serverseitiges Script bzw. Skriptsprache (wie beispielsweise PHP<\/a>) notwendig.<\/p>\n <\/p>\n Unser Memegenerator bzw. Meme Creator wird im Prinzip nur aus drei Teilen bestehen: einer HTML-Seite<\/a> mit den Konfigurationsoptionen, einer minimalistischen CSS-Datei (da wir mit dem CSS-Framework Bootstrap arbeiten) und einer Javascript-Datei mit unserer Logik.<\/p>\n Beginnen wir also mit dem ersten Teil, der HTML-Konfigurationsseite.<\/p>\n Im Grunde legen wir uns hier (wie ihr auch im Beispiel-Screenshot von oben sehen k\u00f6nnt) nur ein Bootrap Grid-Layout an,\u00a0 bei dem links das mit Canvas generierte Meme, und rechts daneben die Konfigurationssoptionen (mit Hilfe von Slider-Elementen) angezeigt werden.<\/p>\n Wie ihr hier seht, reicht es f\u00fcr Canvas vollkommen aus, einfach einen „canvas<\/strong><\/em>“ HTML-Tag zu definieren. Optional k\u00f6nnen die Abmessungen anstatt via CSS-Definitionen auch direkt inline mitgegeben werden. Der Text innerhalb des Canvas-Tags wird nur in Browsern angezeigt,\u00a0die diese Technologie nicht unterst\u00fctzen.<\/p>\n Die Slider-Elemente bekommen alle eine eigenst\u00e4ndige ID zugewiesen, \u00fcber welche wir sp\u00e4ter mittels Javascript bzw. jQuery zugreifen werden. So bekommen wir nicht nur deren eingestellten Wert, sondern k\u00f6nnen deren Start- und Endbereich auch dynamisch anhand der Metadaten der Bilddatei (im Bezug auf dessen Abmessungen) setzen.<\/p>\n <\/p>\n Wie zuvor bereits erw\u00e4hnt, wird sich sich CSS-Datei style.css<\/strong> sehr minimalistisch gestalten, da wir hier in diesem Tutorial auf die Standard-Elemente von Bootstrap<\/a> zur\u00fcckgreifen.<\/p>\n Das Bootstrap-Framework selbst haben wir vorhin bereit \u00fcber deren CDN eingebunden (inkl. den zugeh\u00f6rigen Javascript-Ressourcen).<\/p>\n Das Bild mit der ID „start-image<\/em>“ dient lediglich als Tr\u00e4ger unserer Quell-Bilddatei f\u00fcr das Canvas-Rendering. Aus diesem Grund verschieben wir es der Einfachheit halber aus dem sichtbaren Bereich vom Bildschirm raus.<\/p>\n <\/p>\n Um die Javascript-Logik einbauen zu k\u00f6nnen, erstellen wir uns zuallererst die (bereits im HTML verlinkte) Datei namens app.js<\/strong> mit folgendem jQuery-Grundger\u00fcst.<\/p>\n Innerhalb dieses Blocks folgen nun alle weiteren Schritte.<\/p>\n Daf\u00fcr beginnen wir als Erstes mit der Initialisierung vom Canvas-Element mit der ID „meme“:<\/p>\n In der Variable ctx<\/strong> <\/em>steht uns nun innerhalb des jQuery-Scopes der Anwendungskontext unseres Canvas-Element zur Verf\u00fcgung,\u00a0das selbst \u00fcber die Variable canvas<\/em> <\/strong>zur Verf\u00fcgung steht.<\/p>\n Beginnen wir damit, unserer Applikation Leben einzuhauchen, indem wir die Haupt-Funktion f\u00fcr die Meme-Generierung erstellen. Dazu erstellen wir zuerst eine leere Funktion namens drawMeme()<\/em>.<\/p>\n Die eigentliche Funktionslogik hierf\u00fcr folgt dann ein wenig sp\u00e4ter.<\/p>\n Nachdem wir vorhin in unserem HTML-Markup bereits die beiden Textfelder f\u00fcr den oberen und unteren Textbereich sowie auch die Slider-Eingabefelder f\u00fcr die Konfigurationsm\u00f6glichkeiten angelegt haben, registrieren wir nun unsere drawMeme()-Funktion f\u00fcr alle relevanten Events dieser Felder.<\/p>\n In erster Linie sind dies change<\/em><\/strong>, keyup <\/em><\/strong>und keydown<\/em> <\/strong>f\u00fcr die Felder mit Texteingabe, sowie der change<\/em><\/strong>-Event f\u00fcr unsere Slider-Eingabefelder.<\/p>\n Der zus\u00e4tzliche input<\/em><\/strong>-Event bei diesen Feldern sorgt daf\u00fcr, dass diese Handler auch w\u00e4hrend der Benutzung des Slider-Eingabgefelds (also w\u00e4hrend dem Hin- und Herziehen mit der Maus) getriggert werden.<\/p>\n Zus\u00e4tzlich zeigen wir den gesetzten Wert dieser Felder noch im Konfigurationsformular an, indem wir mit Hilfe der text<\/a>-Funktion diesen in das entsprechende Element \u00fcbergeben, und dessen Inhalt mit\u00a0dem\u00a0Neuen \u00fcberschreiben.<\/p>\n Nun beginnen wir, nach und nach unsere drawMeme()<\/em>-Funktion aufzubauen.<\/p>\n Wir holen uns hier in die Variable img<\/em> <\/strong>unsere Quell-Bilddatei, welche wir mit der ID „start-image“ versehen haben. Uns steht nun das entsprechende Javascript-Objekt davon in dieser Variable zur Verf\u00fcgung.<\/p>\n Der Grund, warum hier mit dem blanken Javascript-Objekt, anstatt dem jQuery-Equivalent gearbeitet wird, ist, dass wir f\u00fcr die Canvas-Funktionen dieses Javascript-Objekt in dieser unber\u00fchrten Form ben\u00f6tigen.<\/p>\n Des Weiteren greifen wir auch die gew\u00fcnschte Gr\u00f6\u00dfe unseres Memes vom Eingabefeld ab, und setzen im weiteren Schritt auch dementsprechend die Maximum-Werte f\u00fcr unsere Offset-Konfigurationsoptionen (f\u00fcr die vertikale Verschiebung der Texte), damit die Slider-Elemente auch entsprechend begrenzt sind.<\/p>\n Als N\u00e4chstes konfigurieren wir das Canvas-Element, indem wir dessen Abmessungen festlegen. Im Zuge dessen \u00fcbergeben wir diesem mittels der Canvas-Funktion drawImage()<\/em><\/a> auch unsere Quelle-Bilddatei,\u00a0die wir vorhin in der Variable img<\/em> <\/strong>gespeichert haben.<\/p>\n Um Verzerrungen vom Quell-Bild zu vermeiden, nutzen wir die von Canvas bereitgestellte Beschneidungsfunktion („Cropping“). Den Maximalwert daf\u00fcr holen wir uns direkt von unserer Quell-Datei, indem wir dessen H\u00f6he und Breite miteinander vergleichen, und so die geeignete Gr\u00f6\u00dfe ermitteln.<\/p>\n Nachdem ein Meme in der Regel immer quadratisch ist (Gr\u00f6\u00dfe in der Variable memeSize<\/strong> <\/em>definiert),\u00a0sollte die Bilddatei ebenfalls im gleichen quatratischen Bildverh\u00e4ltnis (Gr\u00f6\u00dfe in der Variable croppingDimension<\/strong> <\/em>definiert) vorliegen.<\/p>\n Die Quell-Bilddatei wird in diesem Fall auf die Meme-Abmessungen herunterskaliert, und zu einem quadratischen Bild zurecht geschnitten. Der Einfachheit halber verzichten wir auf weitere Ausrichtungen f\u00fcr diesen „Cropping“-Vorgang.<\/p>\n Um die Texte nun in unserem Meme-Canvas positionieren zu k\u00f6nnen, schreiben wir uns eine kleine Hilfsfunktion wrapText()<\/em> (au\u00dferhalb der drawMeme()<\/em>-Funktion):<\/p>\n Im Grunde \u00fcbergeben wir hier nur den Canvas-Scope \u00fcber den Parameter context<\/em><\/strong>, ein paar Parameter, die den einzuf\u00fcgenden Text\u00a0 betreffen, sowie dessen Positionierungs-Eigenschaften.<\/p>\n Es geht hier darum, anhand der Schriftgr\u00f6\u00dfe und dem Zeilenabstand die konkreten X- und Y-Koordinaten zu berechnen, und in den Canvas-Scope (Variable context<\/strong><\/em>) zu \u00fcbergeben – ihr k\u00f6nnt das aber mal „einfach so“ \u00fcbernehmen.<\/p>\n Zur\u00fcck in der\u00a0drawMeme()<\/em>-Funktion legen wir nun anhand unserer Konfigurationsfelder aus der HTML-Maske die Grundeinstellungen f\u00fcr den Canvas-Text fest.<\/p>\n Anschlie\u00dfend \u00e4ndern wir die Texteingabe auf Gro\u00dfbuchstaben, und \u00fcbergeben die gew\u00fcnschte Y-Position. Die X-Koordinate ist genau die H\u00e4lfte der Meme-Breite, da der Text mittig positioniert werden soll.<\/p>\n Mit der Variable maxTextAreaWidth<\/em> <\/strong>schr\u00e4nken wir die maximale Textbreite auf 85% ein. Dies hat aber in erster Linie nur optische Gr\u00fcnde.<\/p>\n Das Gleiche wiederholen wir dann auch f\u00fcr den unteren Text, nur dass wir die Grundeinstellungen der Schrift nicht mehr neu definieren, sondern einfach f\u00fcr die entsprechenden Eigenschaften \u00fcberschreiben m\u00fcssen.<\/p>\n Damit ihr nun auch beliebige Bilder ausw\u00e4hlen k\u00f6nnt, verleihen wir unserem File-Eingabefeld auch die entsprechende Funktion:<\/p>\n Wenn ein neues Bild ausgew\u00e4hlt wird, liest der Javascript-FileReader dieses ein und setzt dessen Base64-String als Source („src“-Attribut) unserer Quell-Bilddatei (mit der ID „start-image“).<\/p>\n Anschlie\u00dfend triggern wir wieder die drawMeme()<\/em>-Funktion, damit diese nun das neue Bild einliest und entsprechend verarbeitet.<\/p>\n <\/p>\n Nun sollte sich auf der Meme-Generator-Seite bereits etwas tun, wenn ihr mal einen der Slider-Elemente oder Eingabefelder \u00e4ndert, da dann mindestens ein Change-Event getriggert wird, durch welchen die drawMeme()<\/em>-Funktion aufgerufen wird.<\/p>\n Damit auch gleich beim Seitenaufruf was zu sehen ist, rufen wir die drawMeme()<\/em>-Funktion einfach initial beim Laden der Seite auf:<\/p>\n Das funktionierende Beispiel k\u00f6nnt ihr euch hier herunterladen:<\/p>\n DEMO HERUNTERLADEN<\/a><\/p>\n <\/p>\n Ihr k\u00f6nnt von eurem Canvas-Element mit Hilfe der Funktion toDataURL()<\/em> jederzeit das aktuelle Bild als Base64-String auslesen.<\/p>\n Eine M\u00f6glichkeit w\u00e4re es, diesen Base64-String als „href“-Attribut f\u00fcr euren Download-Link zu setzen, und mittels dem „download“-Attribut den gew\u00fcnschten Dateinamen anzugeben.<\/p>\n Beachtet hier aber, dass dies nicht von allen Browsern unterst\u00fctzt wird, und demensprechend nicht \u00fcberall funktionieren wird.<\/p>\n Im Idealfall solltet ihr diesen Base64-String beispielsweise mittels jQuery.post()<\/a> oder jQuery.ajax<\/a> an ein serverseitiges Script senden, welches euch\u00a0den String dann mit dem entsprechenden „Content-Type“<\/em>-Header („image\/png“) wieder zur\u00fcckliefert.<\/p>\n So w\u00e4re sichergestellt, dass es wirklich in allen Browsern funktioniert.<\/p>\n <\/p>\n Mit Canvas bekommt ihr ein m\u00e4chtiges Tool in die Hand gelegt, wenn es darum geht, dynamisch Grafiken im Browser mittels Javascript zu zeichnen.<\/p>\n Am h\u00e4ufigsten werdet ihr Canvas im Zusammenhang mit Graph-Libraries finden, da sich diese Technik vor allem im Statistik-Bereich sehr etabliert hat.<\/p>\n Mit Canvas zu arbeiten ist nicht besonders schwierig. Das einzige, was schnell mal kompliziert werden kann, ist \u2013 wie in unserem Beispiel des Meme-Generators \u2013 meist die korrekte Ermittlung bzw. Berechnung der einzelnen Positionen der generierten Elemente.<\/p>\n","protected":false},"excerpt":{"rendered":" In diesem Tutorial werde ich euch zeigen, wie man mit dem HTML-Element Canvas einen Memegenerator bzw. Meme Creator erstellen kann. Was ist ein Meme? Bei Memes handelt es sich um Pseudo-Bilder mit einer meist mehr oder weniger sinnhaften Text\u00fcberblendung. Von der Themenwahl her gibt es praktisch keine Vorgaben, wodurch deren Entstehung jeweils meist auf Zufall […]<\/p>\n","protected":false},"author":15,"featured_media":2961,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[419,422,2283,2281,77],"yoast_head":"\nSchritt 1: HTML-Markup f\u00fcr Konfigurator anlegen<\/h2>\n
<html>\r\n\t<head>\r\n\t\t<title>Meme Generator<\/title>\r\n\t\t\r\n\t\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta\/css\/bootstrap.min.css\" integrity=\"sha384-\/Y6pD6FV\/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\r\n\t\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" \/>\r\n\t\t<link rel=\"stylesheet\" href=\"style.css\"\/>\r\n\t<\/head>\r\n\t<body>\r\n\t\r\n\t<nav class=\"navbar navbar-expand-md navbar-dark bg-dark fixed-top\">\r\n\t\t<a class=\"navbar-brand\" href=\"#\">Meme Generator<\/a>\r\n\t\t<button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarsExampleDefault\" aria-controls=\"navbarsExampleDefault\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n\t\t\t<span class=\"navbar-toggler-icon\"><\/span>\r\n\t\t<\/button>\r\n\r\n\t\t<div class=\"collapse navbar-collapse\" id=\"navbarsExampleDefault\">\r\n\t\t\t<ul class=\"navbar-nav mr-auto\">\r\n\t\t\t\t<li class=\"nav-item active\">\r\n\t\t\t\t\t<a class=\"nav-link\" href=\"#\">Home <span class=\"sr-only\">(current)<\/span><\/a>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li class=\"nav-item\">\r\n\t\t\t\t\t<a class=\"nav-link\" href=\"#\">Gallery<\/a>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li class=\"nav-item\">\r\n\t\t\t\t\t<a class=\"nav-link\" href=\"#\">About<\/a>\r\n\t\t\t\t<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\t<\/nav>\r\n\r\n\t<div class=\"container\">\r\n\t\r\n\t\t<div class=\"page-header\">\r\n\t\t\t<h1><i class=\"fa fa-2x fa-paint-brush\" aria-hidden=\"true\"><\/i> Create your awesome Meme now!<\/h1>\r\n\t\t<\/div>\r\n\t\r\n\t\t<p> <\/p>\r\n\t\t\r\n\t\t<div class=\"row\">\r\n\t\t\t<div class=\"col-md-4\">\r\n\t\t\t\r\n\t\t\t\t<!-- BEGIN: Canvas rendering of generated Meme -->\r\n\t\t\t\t<canvas id=\"meme\" class=\"img-thumbnail img-fluid\">\r\n\t\t\t\t\tUnfortunately your browser does not support canvas.\r\n\t\t\t\t<\/canvas>\r\n\t\t\t\t<!-- END: Canvas rendering of generated Meme -->\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t<a href=\"javascript:;\" class=\"btn btn-primary btn-block\" id=\"download_meme\">\r\n\t\t\t\t\t<i class=\"fa fa-download\" aria-hidden=\"true\"><\/i> Download\r\n\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t<img id=\"start-image\" src=\"image.jpg\" alt=\"\" \/>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"col-md-8\">\r\n\t\t\t\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<div class=\"col-md-12\">\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"input-group\">\r\n\t\t\t\t\t\t\t<span class=\"input-group-addon\">Image:<\/span>\r\n\t\t\t\t\t\t\t<input type=\"file\" class=\"form-control\" id=\"imgInp\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t<hr \/>\r\n\t\t\t\t\r\n\t\t\t\t<h3>Text 1:<\/h3>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<input type=\"text\" class=\"form-control form-control-lg\" value=\"Have you expected this to be\" id=\"text_top\" \/>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t<label class=\"control-label col-md-3\" for=\"text_top_offset\">Offset from top:<\/label>\r\n\t\t\t\t\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t<input style=\"width:100%\" id=\"text_top_offset\" type=\"range\" min=\"0\" max=\"500\" value=\"50\"\/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div class=\"col-md-2 setting-value\">\r\n\t\t\t\t\t\t\t<span id=\"text_top_offset__val\">50<\/span>px\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t<p> <\/p>\r\n\t\t\t\t\r\n\t\t\t\t<h3>Text 2:<\/h3>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<input type=\"text\" class=\"form-control form-control-lg\" value=\"funny?\" id=\"text_bottom\" \/>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t<label class=\"control-label col-md-3\" for=\"text_bottom_offset\">Offset from top:<\/label>\r\n\t\t\t\t\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t<input style=\"width:100%\" id=\"text_bottom_offset\" type=\"range\" min=\"0\" max=\"500\" value=\"450\"\/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div class=\"col-md-2 setting-value\">\r\n\t\t\t\t\t\t\t<span id=\"text_bottom_offset__val\">450<\/span>px\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t<hr \/>\r\n\t\t\t\t\r\n\t\t\t\t<p> <\/p>\r\n\r\n\t\t\t\t<div class=\"card\">\r\n\t\t\t\t\t<div class=\"card-header\">\r\n\t\t\t\t\t\t<i class=\"fa fa-cogs\" aria-hidden=\"true\"><\/i> More options\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"card-body\">\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t<div class=\"col-md-12\">\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t\t\t\t<label class=\"control-label col-md-3\" for=\"canvas_size\">Meme size:<\/label>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input style=\"width:100%\" id=\"canvas_size\" type=\"range\" min=\"0\" max=\"1000\" value=\"500\"\/>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-2 setting-value\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span id=\"canvas_size__val\">500<\/span>px\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t\t\t\t<label class=\"control-label col-md-3\" for=\"text_font_size\">Font size:<\/label>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input style=\"width:100%\" id=\"text_font_size\" type=\"range\" min=\"0\" max=\"72\" value=\"28\"\/>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-2 setting-value\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span id=\"text_font_size__val\">28<\/span>pt\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t\t\t\t<label class=\"control-label col-md-3\" for=\"text_line_height\">Line height:<\/label>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input style=\"width:100%\" id=\"text_line_height\" type=\"range\" min=\"0\" max=\"100\" value=\"15\"\/>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-2 setting-value\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span id=\"text_line_height__val\">15<\/span>pt\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t\t\t\t<label class=\"control-label col-md-3\" for=\"text_stroke_width\">Stroke width:<\/label>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input style=\"width:100%\" id=\"text_stroke_width\" type=\"range\" min=\"0\" max=\"20\" value=\"4\"\/>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-2 setting-value\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span id=\"text_stroke_width__val\">4<\/span>pt\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t\r\n\t<\/div>\r\n\r\n\t\r\n\t<!-- Bootstrap core JavaScript\r\n\t================================================== -->\r\n\t<!-- Placed at the end of the document so the pages load faster -->\r\n\t<script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr\/rE9\/Qpg6aAZGJwFDMVNA\/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"><\/script>\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.11.0\/umd\/popper.min.js\" integrity=\"sha384-b\/U6ypiBEHpOf\/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4\" crossorigin=\"anonymous\"><\/script>\r\n\t<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta\/js\/bootstrap.min.js\" integrity=\"sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1\" crossorigin=\"anonymous\"><\/script>\r\n\t<script src=\"app.js\"><\/script>\r\n\t\r\n\t<\/body>\r\n<\/html><\/pre>\n
Schritt 2: CSS-Datei vorbereiten<\/h2>\n
body {\r\n padding-top: 5rem;\r\n}\r\n\r\nimg#start-image {\r\n\tposition: absolute;\r\n\tleft: -10000px;\r\n\ttop: -10000px;\r\n}\r\n\r\n.setting-value {\r\n\ttext-align: center;\r\n\tfont-weight: bold;\r\n}<\/pre>\nSchritt 3: Javascript-Logik einbauen<\/h2>\n
$(document).ready(function(){\r\n\r\n\t\/\/ here will be the whole application logic...\r\n\r\n});<\/pre>\nvar canvas = document.getElementById('meme');\r\nctx = canvas.getContext('2d');<\/pre>\n\/\/ core drawing function\r\nvar drawMeme = function() {\r\n\t\/\/ here will be our \"drawing-code\" for our memes...\r\n\r\n};<\/pre>\n\/\/ register event listeners\r\n\r\n$(document).on('change keydown keyup', '#text_top', function() {\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('change keydown keyup', '#text_bottom', function() {\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('input change', '#text_top_offset', function() {\r\n\t$('#text_top_offset__val').text( $(this).val() );\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('input change', '#text_bottom_offset', function() {\r\n\t$('#text_bottom_offset__val').text( $(this).val() );\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('input change', '#text_font_size', function() {\r\n\t$('#text_font_size__val').text( $(this).val() );\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('input change', '#text_line_height', function() {\r\n\t$('#text_line_height__val').text( $(this).val() );\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('input change', '#text_stroke_width', function() {\r\n\t$('#text_stroke_width__val').text( $(this).val() );\r\n\tdrawMeme();\r\n});\r\n\r\n$(document).on('input change', '#canvas_size', function() {\r\n\t$('#canvas_size__val').text( $(this).val() );\r\n\tdrawMeme();\r\n});<\/pre>\n\/\/ core drawing function\r\nvar drawMeme = function() {\r\n\tvar img = document.getElementById('start-image');\r\n\r\n\tvar fontSize = parseInt( $('#text_font_size').val() );\r\n\tvar memeSize = parseInt( $('#canvas_size').val() );\r\n\t\r\n\t\/\/ set form field properties\r\n\t$('#text_top_offset').attr('max', memeSize);\r\n\t$('#text_bottom_offset').attr('max', memeSize);\r\n\t\r\n\t\r\n};<\/pre>\n\/\/ initialize canvas element with desired dimensions\r\ncanvas.width = memeSize;\r\ncanvas.height = memeSize;\r\n\r\nctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n\/\/ calculate minimum cropping dimension\r\nvar croppingDimension = img.height;\r\nif( img.width < croppingDimension ){\r\n\tcroppingDimension = img.width;\r\n}\r\n\r\nctx.drawImage(img, 0, 0, croppingDimension, croppingDimension, 0, 0, memeSize, memeSize);<\/pre>\n\/\/ build inner container for wrapping text inside\r\nvar wrapText = function(context, text, x, y, maxWidth, lineHeight, fromBottom) {\r\n\tvar pushMethod = (fromBottom) ? 'unshift' : 'push';\r\n\r\n\tlineHeight = (fromBottom) ? -lineHeight : lineHeight;\r\n\r\n\tvar lines = [];\r\n\tvar y = y;\r\n\tvar line = '';\r\n\tvar words = text.split(' ');\r\n\r\n\tfor (var n = 0; n < words.length; n++) {\r\n\t\tvar testLine = line + ' ' + words[n];\r\n\t\tvar metrics = context.measureText(testLine);\r\n\t\tvar testWidth = metrics.width;\r\n\r\n\t\tif (testWidth > maxWidth) {\r\n\t\t\tlines[pushMethod](line);\r\n\t\t\tline = words[n] + ' ';\r\n\t\t} else {\r\n\t\t\tline = testLine;\r\n\t\t}\r\n\t}\r\n\tlines[pushMethod](line);\r\n\r\n\tfor (var k in lines) {\r\n\t\tcontext.strokeText(lines[k], x, y + lineHeight * k);\r\n\t\tcontext.fillText(lines[k], x, y + lineHeight * k);\r\n\t}\r\n};<\/pre>\nctx.lineWidth = parseInt( $('#text_stroke_width').val() );\r\nctx.font = fontSize + 'pt sans-serif';\r\nctx.strokeStyle = 'black';\r\nctx.fillStyle = 'white';\r\nctx.textAlign = 'center';\r\nctx.textBaseline = 'top';\r\n\r\nvar text1 = $('#text_top').val();\r\ntext1 = text1.toUpperCase();\r\nx = memeSize \/ 2;\r\ny = parseInt( $('#text_top_offset').val() );\r\n\r\nvar lineHeight = fontSize + parseInt( $('#text_line_height').val() );\r\nvar maxTextAreaWidth = memeSize * 0.85;\r\n\r\nwrapText(ctx, text1, x, y, maxTextAreaWidth, lineHeight, false);<\/pre>\nctx.textBaseline = 'bottom';\r\nvar text2 = $('#text_bottom').val();\r\ntext2 = text2.toUpperCase();\r\ny = parseInt( $('#text_bottom_offset').val() );\r\n\r\nwrapText(ctx, text2, x, y, maxTextAreaWidth, lineHeight, true);<\/pre>\n\/\/ read selected input image from upload field and display it in browser\r\n$(\"#imgInp\").change(function(){\r\n\tvar input = this;\r\n\t\r\n\tif (input.files && input.files[0]) {\r\n\t\tvar reader = new FileReader();\r\n\t\t\r\n\t\treader.onload = function (e) {\r\n\t\t\t$('#start-image').attr('src', e.target.result);\r\n\t\t}\r\n\r\n\t\treader.readAsDataURL(input.files[0]);\r\n\t}\r\n\t\r\n\twindow.setTimeout(function(){\r\n\t\tdrawMeme();\r\n\t}, 500);\r\n});<\/pre>\n\/\/ init at startup\r\nwindow.setTimeout(function(){\r\n\tdrawMeme();\r\n}, 100);<\/pre>\nSchritt 4: Optionalen Download-Link hinzuf\u00fcgen<\/h2>\n
$('#download_meme').click(function(e){\r\n\t$(this).attr('href', canvas.toDataURL());\r\n\t$(this).attr('download', 'meme.png');\r\n});<\/pre>\nFazit Memegenerator<\/h2>\n