{"id":3850,"date":"2018-09-12T14:41:27","date_gmt":"2018-09-12T14:41:27","guid":{"rendered":"https:\/\/anexia.com\/blog\/de\/?p=3850"},"modified":"2022-04-13T15:07:42","modified_gmt":"2022-04-13T13:07:42","slug":"lehr-howto-bilder-aus-clipboard-hochladen","status":"publish","type":"post","link":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/","title":{"rendered":"Lehr-Howto: Bilder aus Clipboard hochladen"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Nun befinde ich mich schon \u00fcber 1 Jahr in der Lehre als Softwareentwickler bei Anexia. Als ich im M\u00e4rz 2017 hier angefangen habe, konnte ich gerade so eine einfache Seite mit <a href=\"https:\/\/anexia.com\/de\/softwareentwicklung\/webentwicklung\/htmlcss-entwicklung\/\">HTML und CSS<\/a> erstellen und ich wusste was Swift und Java war. Seit dieser Zeit habe ich einiges an Know-how dazu gewinnen k\u00f6nnen. Am meisten nutze ich jedoch Javascript und <a href=\"https:\/\/anexia.com\/softwareentwicklung\/webentwicklung\/php-entwicklung\/\">PHP<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Neulich stie\u00df ich allerdings auf ein kleines Problem. Ich sollte auf der dem bereits bestehenden Link-Shortener der Anexia, anx.io, eine kleine \u00c4nderung vornehmen. Diese Seite wird nicht nur dazu genutzt, einen langen Link zu k\u00fcrzen, man kann auch Bilder von seinem PC hochladen zu denen nach Klick auf den Upload-Button auch ein Link ausgegeben wird. Benutzt man diesen Link, wird das Bild angezeigt, das man verwendet hatte.<\/span><\/p>\n<p>Ich bekam die Aufgabe, dass der User die Funktion nutzen kann, einfach mit \u201cstgr+v\u201d ein Bild aus seinem Clipboard oder ein Bild via Drag&amp;Drop einzuf\u00fcgen. Um das zu bewerkstelligen wurde fr\u00fcher ZeroClipboard verwendet, f\u00fcr mich kam das aber nicht in Frage, da ich ich eine reine Javascript-L\u00f6sung einsetzen wollte.<\/p>\n<p>Hier stelle ich euch ein kleines\u00a0<a href=\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2018\/09\/testProject.zip\">Projekt<\/a>\u00a0mit dem Sourcecode\u00a0zur Verf\u00fcgung um es auch gleich selbst auszuprobieren.<\/p>\n<p>&nbsp;<\/p>\n<h2>Clipboard<\/h2>\n<p>F\u00fcr meine L\u00f6sung wird zuerst jQuery eingebunden, ich mach das einfach im header:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;script src=\"https:\/\/code.jquery.com\/jquery-latest.min.js\"&lt;\/script&gt;<\/pre>\n<p>Um das sp\u00e4ter hochgeladene Bild mit einem Post-Request zu verschicken erstelle ich zuerst einen Form-Tag und darunter noch einen Submit-Button zum versenden<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;form action=\"\/upload.php\" method=\"POST\"&gt;\r\n    &lt;button type=\"submit\" id=\"upload\"&gt;Upload&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>Darin erstelle ich als n\u00e4chstes ein Input Feld, das ich auf hidden setze.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;input type=\"hidden\" id=\"base64_file_form\"\/&gt;<\/pre>\n<p>Der type wird absichtlich auf &#8222;hidden&#8220; gesetzt und es wird ein eventlistener auf die Seite gesetzt, der auf die Tastenkombination &#8222;strg+v&#8220; (&#8218;paste&#8216;) h\u00f6rt. Das Bild wird in base64 umgewandelt und ins Input Feld gespeichert.<\/p>\n<pre class=\"lang:js decode:true \">document.getElementById(\"base64_file_form\").value = evt.target.result;\r\ndocument.getElementById(\"base64_file_form\").setAttribute('name', 'base64_file');<\/pre>\n<p>Base64 ist ein Verfahren zur Kodierung von 8-bit-Bin\u00e4rdaten\u00a0<span style=\"font-weight: 400;\">(z.B. ausf\u00fchrbare Dateien oder Bilder) in eine Zeichenfolge, die nur aus ASCII-Zeichen besteht. So kann man das Bild z.B. als Post Request verschicken und in seine Datenbank speichern.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Danach f\u00fcge ich in mein HTML-File noch ein div ein, in dem der User das Bild das er eingef\u00fcgt hat sofort zur \u00dcberpr\u00fcfung ansehen kann. Darum gebe ich dem Div eine bestimmte Gr\u00f6\u00dfe, damit wir das Bild danach auch sehen.<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;div id=\"picture\"&gt;&lt;\/div&gt;\r\n\r\n&lt;style&gt;\r\n   #picture {\r\n      background-size: contain;\r\n      background-repeat: no-repeat;\r\n      max-height: 150px;\r\n   }\r\n&lt;\/style&gt;<\/pre>\n<p>Auf dieses div wird in dem Script der base64 String als Background Image gesetzt.<\/p>\n<pre class=\"lang:default decode:true \">document.getElementById(\"picture\").style.backgroundImage = \"url('\"+evt.target.result+\"')\";<\/pre>\n<p>&nbsp;<\/p>\n<h2>Drag &amp; Drop<\/h2>\n<p><span style=\"font-weight: 400;\">F\u00fcr die Drag &amp; Drop-Funktion erstelle ich ein Div. Dieses nenne ich die \u201cdropzone\u201d, da in diesem Bereich ein Bild hineingezogen wird. Auch dieses bekommt eine bestimmte Breite und eine bestimmte H\u00f6he und ich gebe dem Div einen gestrichelten Rand, damit ist die Dropzone in der das Bild gezogen wird \u00fcbersichtlicher.<\/span><\/p>\n<pre class=\"lang:default decode:true\">&lt;div id=\"dropzone\"&gt;\r\n    &lt;input type=\"hidden\" id=\"dropy\"\/&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;style&gt;\r\n#dropzone {\r\n     width: 200px;\r\n     height: 100px;\r\n     border: 1px dashed #000000;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">In die Dropzone verschachtelte ich noch ein Input Feld, in das auch wie oben der base64 String geschrieben wird. Somit kann man auch hier ein Post Request abfeuern. <\/span><\/p>\n<pre class=\"lang:js decode:true \">window.addEventListener(\"load\", function() {\r\n  $(\"#dropzone\")\r\n    .bind(\"dragover\", function(e) {\r\n      $(this).addClass(\"dragover\");\r\n      return false;\r\n    })\r\n    .bind(\"dragleave\", function(e) {\r\n      $(this).removeClass(\"dragover\");\r\n      e.stopPropagation();\r\n      e.preventDefault();\r\n      return false;\r\n    })\r\n    .bind(\"drop\", function(e) {\r\n      $(this).removeClass(\"dragover\");\r\n      e.stopPropagation();\r\n      e.preventDefault();\r\n      readImages(e);\r\n      return false;\r\n    });\r\n\r\n  $(document.body)\r\n    .bind(\"dragover\", function(e) {\r\n      return false;\r\n    })\r\n    .bind(\"drop\", function(e) {\r\n      e.stopPropagation();\r\n      e.preventDefault();\r\n      return false;\r\n    });\r\n});\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">Es ist wichtig, auch einen Event Listener auf diese Funktion zu setzen. So wird n\u00e4mlich die Funktion aufgerufen wenn ein Bild hineingezogen wird.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Auch hier wird wieder der Background von der id=\u201dpicture\u201d gesetzt f\u00fcr die Kontrolle.<\/span><\/p>\n<pre class=\"lang:js decode:true \">function readImage(file, event) {\r\n  document.getElementById(\"dropy\").value = event.target.result;\r\n  document.getElementById(\"base64_image\").style.backgroundImage = \"url('\"+event.target.result+\"')\";\r\n  document.getElementById(\"dropzone\").setAttribute('name', 'base64_file');\r\n}\r\n\r\nfunction readImages(event) {\r\n  var files = event.originalEvent.dataTransfer.files;\r\n  $.each( files, function(index, file){\r\n    var fileReader = new FileReader();\r\n    fileReader.onload = (function(file) {\r\n      return readImage(file, event);\r\n    }\r\n  })(file);\r\n  fileReader.readAsDataURL(file);\r\n  return found = true;\r\n  });\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>Tipp<\/h2>\n<p><span style=\"font-weight: 400;\">Zu beachten bei solchen Aufgaben ist, dass ein User keinen Code bzw. andere Files hochladen kann, diese k\u00f6nnten unerw\u00fcnschten Code beinhalten und Schaden an der Applikation anrichten. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ein sicherer Upload f\u00fcr Bilder kann z.B. so aussehen:<\/span><\/p>\n<pre class=\"lang:php decode:true \">\/\/checking the file extension\r\n$allowed_extensions = array('png', 'jpg', 'jpeg', 'gif');\r\nif(!in_array($extension, $allowed_extensions)) {\r\n die();\r\n}\r\n \r\n\/\/checking the file size\r\n$max_size = 500*1024; \/\/500 KB\r\nif($_FILES['datei']['size'] &gt; $max_size) {\r\n die();\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">Dabei wird \u00fcberpr\u00fcft, dass wirklich eine Bilddatei hochgeladen wird, au\u00dferdem wird auch die Gr\u00f6\u00dfe des Bildes \u00fcberpr\u00fcft, um zu gro\u00dfe Dateien auszuschlie\u00dfen. <\/span><\/p>\n<p>Man k\u00f6nnte dies auch schon im Frontend abfragen, doch ein Angreifer k\u00f6nnte den JavaScript Code manipulieren um trotzdem andere Dateiformate hochladen. Darum macht es mehr Sinn die \u00dcberpr\u00fcfung im Backend (serverseitig) durchzuf\u00fchren. Um auf Nummer sicher zu gehen kann auch explizit angeben werden, das der Ordner in welchem die Uploads landen, keine ausf\u00fchrbaren Rechte besitzt.<\/p>\n<h2>Fazit<\/h2>\n<p><span style=\"font-weight: 400;\">So ein Jahr vergeht wirklich schnell, und auch wenn das Projekt \u201cBild Hochladen beim Link-Shortener\u201d f\u00fcr jeden ausgelernten Entwickler vielleicht ein Kinderspiel ist, bin ich doch \u00fcberrascht, das nun so locker \u201chinzucoden\u201d. Mein Ich vor einem Jahr w\u00e4re begeistert von meinen in dieser verh\u00e4ltnism\u00e4\u00dfig kurzen Zeit erworbenen F\u00e4higkeiten. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Anexia bildet \u00fcbrigens immer wieder junge Leute als Softwareentwickler aus, und ich finde bewerben lohnt sich: <a href=\"https:\/\/anexia.com\/de\/unternehmen\/karriere\/\">joinourrevolution.net<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&#038;Drop eingef\u00fcgt werden.<\/p>\n","protected":false},"author":28,"featured_media":4137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[469,368,404,14,77],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lehr-Howto: Bilder aus Clipboard hochladen - ANEXIA Blog<\/title>\n<meta name=\"description\" content=\"Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&amp;Drop eingef\u00fcgt werden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lehr-Howto: Bilder aus Clipboard hochladen - ANEXIA Blog\" \/>\n<meta property=\"og:description\" content=\"Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&amp;Drop eingef\u00fcgt werden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/\" \/>\n<meta property=\"og:site_name\" content=\"ANEXIA Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/anexiagmbh\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-12T14:41:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T13:07:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"672\" \/>\n\t<meta property=\"og:image:height\" content=\"372\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dennis Schaffer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_ANEXIA\" \/>\n<meta name=\"twitter:site\" content=\"@_ANEXIA\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dennis Schaffer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/\",\"url\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/\",\"name\":\"Lehr-Howto: Bilder aus Clipboard hochladen - ANEXIA Blog\",\"isPartOf\":{\"@id\":\"https:\/\/anexia.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\",\"datePublished\":\"2018-09-12T14:41:27+00:00\",\"dateModified\":\"2022-04-13T13:07:42+00:00\",\"author\":{\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933\"},\"description\":\"Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&Drop eingef\u00fcgt werden.\",\"breadcrumb\":{\"@id\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#primaryimage\",\"url\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\",\"contentUrl\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\",\"width\":672,\"height\":372,\"caption\":\"JOR_Dennis_Tutorial-Teaser\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/anexia.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lehr-Howto: Bilder aus Clipboard hochladen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/anexia.com\/blog\/#website\",\"url\":\"https:\/\/anexia.com\/blog\/\",\"name\":\"ANEXIA Blog\",\"description\":\"[:de] ANEXIA Blog - Technischen Themen, Anexia News und Insights [:]\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/anexia.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933\",\"name\":\"Dennis Schaffer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g\",\"caption\":\"Dennis Schaffer\"},\"url\":\"https:\/\/anexia.com\/blog\/author\/dschaffer\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lehr-Howto: Bilder aus Clipboard hochladen - ANEXIA Blog","description":"Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&Drop eingef\u00fcgt werden.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/","og_locale":"de_DE","og_type":"article","og_title":"Lehr-Howto: Bilder aus Clipboard hochladen - ANEXIA Blog","og_description":"Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&Drop eingef\u00fcgt werden.","og_url":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/","og_site_name":"ANEXIA Blog","article_publisher":"https:\/\/www.facebook.com\/anexiagmbh\/","article_published_time":"2018-09-12T14:41:27+00:00","article_modified_time":"2022-04-13T13:07:42+00:00","og_image":[{"width":672,"height":372,"url":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","type":"image\/jpeg"}],"author":"Dennis Schaffer","twitter_card":"summary_large_image","twitter_creator":"@_ANEXIA","twitter_site":"@_ANEXIA","twitter_misc":{"Verfasst von":"Dennis Schaffer","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/","url":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/","name":"Lehr-Howto: Bilder aus Clipboard hochladen - ANEXIA Blog","isPartOf":{"@id":"https:\/\/anexia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#primaryimage"},"image":{"@id":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#primaryimage"},"thumbnailUrl":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","datePublished":"2018-09-12T14:41:27+00:00","dateModified":"2022-04-13T13:07:42+00:00","author":{"@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933"},"description":"Hier beschreibe ich euch, wie die Funktion eingebaut werden kann, dass Bilder einfach mit \u201cstgr+v\u201d aus seinem Clipboard oder Drag&Drop eingef\u00fcgt werden.","breadcrumb":{"@id":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#primaryimage","url":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","contentUrl":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","width":672,"height":372,"caption":"JOR_Dennis_Tutorial-Teaser"},{"@type":"BreadcrumbList","@id":"https:\/\/anexia.com\/blog\/de\/lehr-howto-bilder-aus-clipboard-hochladen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/anexia.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Lehr-Howto: Bilder aus Clipboard hochladen"}]},{"@type":"WebSite","@id":"https:\/\/anexia.com\/blog\/#website","url":"https:\/\/anexia.com\/blog\/","name":"ANEXIA Blog","description":"[:de] ANEXIA Blog - Technischen Themen, Anexia News und Insights [:]","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/anexia.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933","name":"Dennis Schaffer","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g","caption":"Dennis Schaffer"},"url":"https:\/\/anexia.com\/blog\/author\/dschaffer\/"}]}},"lang":"de","translations":{"de":3850,"en":6632},"amp_enabled":true,"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/3850"}],"collection":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/comments?post=3850"}],"version-history":[{"count":43,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/3850\/revisions"}],"predecessor-version":[{"id":6634,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/3850\/revisions\/6634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/media\/4137"}],"wp:attachment":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/media?parent=3850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/categories?post=3850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/tags?post=3850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}