{"id":5080,"date":"2025-09-28T09:47:25","date_gmt":"2025-09-28T07:47:25","guid":{"rendered":"https:\/\/informatoo.com\/?page_id=5080"},"modified":"2025-09-28T10:24:50","modified_gmt":"2025-09-28T08:24:50","slug":"test-bildbearbeitung","status":"publish","type":"page","link":"https:\/\/informatoo.com\/en\/test-bildbearbeitung\/","title":{"rendered":"Test Bildbe\u00adar\u00adbeitung"},"content":{"rendered":"\n<div style=\"max-width:100%;overflow:auto\">\n  <canvas id=\"canvas\" style=\"border:1px solid #ccc;max-width:100%\"><\/canvas>\n  <br>\n  <button onclick=\"undoLast()\">Letzte Markierung l\u00f6schen<\/button>\n  <button onclick=\"applyBlur()\">Alle weichzeichnen<\/button>\n  <button onclick=\"downloadImage()\">Bild herunterladen<\/button>\n<\/div>\n\n<script>\nlet canvas = document.getElementById('canvas');\nlet ctx = canvas.getContext('2d');\nlet image = new Image();\nimage.src = 'DSCN9201.JPG'; \/\/ Pfad zum Originalbild\nlet boxes = [];\nlet startX, startY, isDrawing = false;\n\nimage.onload = () => {\n  canvas.width = image.width;\n  canvas.height = image.height;\n  ctx.drawImage(image, 0, 0);\n};\n\n\/\/ Rechteck zeichnen\ncanvas.onmousedown = e => {\n  const rect = canvas.getBoundingClientRect();\n  startX = (e.clientX - rect.left);\n  startY = (e.clientY - rect.top);\n  isDrawing = true;\n};\ncanvas.onmousemove = e => {\n  if (!isDrawing) return;\n  const rect = canvas.getBoundingClientRect();\n  const x = (e.clientX - rect.left);\n  const y = (e.clientY - rect.top);\n  ctx.drawImage(image, 0, 0);\n  boxes.forEach(b => drawBox(b));\n  drawBox({x:startX, y:startY, w:x-startX, h:y-startY}, 'red');\n};\ncanvas.onmouseup = e => {\n  isDrawing = false;\n  const rect = canvas.getBoundingClientRect();\n  const endX = (e.clientX - rect.left);\n  const endY = (e.clientY - rect.top);\n  boxes.push({x:startX, y:startY, w:endX-startX, h:endY-startY});\n  ctx.drawImage(image, 0, 0);\n  boxes.forEach(b => drawBox(b));\n};\n\nfunction drawBox(b, color='blue') {\n  ctx.strokeStyle = color;\n  ctx.lineWidth = 2;\n  ctx.strokeRect(b.x, b.y, b.w, b.h);\n}\n\nfunction undoLast() {\n  boxes.pop();\n  ctx.drawImage(image, 0, 0);\n  boxes.forEach(b => drawBox(b));\n}\n\nfunction applyBlur() {\n  let tempCanvas = document.createElement('canvas');\n  let tctx = tempCanvas.getContext('2d');\n  tempCanvas.width = image.width;\n  tempCanvas.height = image.height;\n  tctx.drawImage(image, 0, 0);\n\n  boxes.forEach(b => {\n    let x = Math.min(b.x, b.x+b.w);\n    let y = Math.min(b.y, b.y+b.h);\n    let w = Math.abs(b.w);\n    let h = Math.abs(b.h);\n\n    let region = document.createElement('canvas');\n    region.width = w;\n    region.height = h;\n    let rctx = region.getContext('2d');\n    rctx.drawImage(image, x, y, w, h, 0, 0, w, h);\n\n    \/\/ Blur anwenden\n    tctx.save();\n    tctx.beginPath();\n    tctx.rect(x, y, w, h);\n    tctx.clip();\n    tctx.filter = 'blur(18px)'; \/\/ st\u00e4rkerer Blur f\u00fcr Kennzeichen\n    tctx.drawImage(region, x, y, w, h);\n    tctx.restore();\n    tctx.filter = 'none';\n  });\n\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  ctx.drawImage(tempCanvas, 0, 0);\n}\n\nfunction downloadImage() {\n  let link = document.createElement('a');\n  link.download = 'anonymisiert.png';\n  link.href = canvas.toDataURL();\n  link.click();\n}\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Letzte Markierung l\u00f6schen Alle weich\u00adzeichnen Bild herun\u00adter\u00adladen<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[],"tags":[],"ai_version":[],"class_list":["post-5080","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Test Bildbearbeitung<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/informatoo.com\/en\/test-bildbearbeitung\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:locale:alternate\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test Bildbearbeitung\" \/>\n<meta property=\"og:description\" content=\"Letzte Markierung l\u00f6schen Alle weichzeichnen Bild herunterladen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/informatoo.com\/en\/test-bildbearbeitung\/\" \/>\n<meta property=\"og:site_name\" content=\"informatoo.com\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-28T08:24:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/informatoo.com\\\/test-bildbearbeitung\\\/\",\"url\":\"https:\\\/\\\/informatoo.com\\\/test-bildbearbeitung\\\/\",\"name\":\"Test Bildbearbeitung\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/informatoo.com\\\/#website\"},\"datePublished\":\"2025-09-28T07:47:25+00:00\",\"dateModified\":\"2025-09-28T08:24:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/informatoo.com\\\/test-bildbearbeitung\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/informatoo.com\\\/test-bildbearbeitung\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/informatoo.com\\\/test-bildbearbeitung\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/informatoo.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test Bildbe\u00adar\u00adbeitung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/informatoo.com\\\/#website\",\"url\":\"https:\\\/\\\/informatoo.com\\\/\",\"name\":\"informatoo.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/informatoo.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/informatoo.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/informatoo.com\\\/#organization\",\"name\":\"informatoo.com\",\"url\":\"https:\\\/\\\/informatoo.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/informatoo.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/informatoo.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/informatoo.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/logo.png\",\"width\":32,\"height\":59,\"caption\":\"informatoo.com\"},\"image\":{\"@id\":\"https:\\\/\\\/informatoo.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test Bildbearbeitung","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:\/\/informatoo.com\/en\/test-bildbearbeitung\/","og_locale":"en_US","og_type":"article","og_title":"[:de]Test Bildbearbeitung[:] - informatoo.com","og_description":"Letzte Markierung l\u00f6schen Alle weichzeichnen Bild herunterladen","og_url":"https:\/\/informatoo.com\/en\/test-bildbearbeitung\/","og_site_name":"informatoo.com","article_modified_time":"2025-09-28T08:24:50+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/informatoo.com\/test-bildbearbeitung\/","url":"https:\/\/informatoo.com\/test-bildbearbeitung\/","name":"Test Bildbearbeitung","isPartOf":{"@id":"https:\/\/informatoo.com\/#website"},"datePublished":"2025-09-28T07:47:25+00:00","dateModified":"2025-09-28T08:24:50+00:00","breadcrumb":{"@id":"https:\/\/informatoo.com\/test-bildbearbeitung\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/informatoo.com\/test-bildbearbeitung\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/informatoo.com\/test-bildbearbeitung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/informatoo.com\/"},{"@type":"ListItem","position":2,"name":"Test Bildbe\u00adar\u00adbeitung"}]},{"@type":"WebSite","@id":"https:\/\/informatoo.com\/#website","url":"https:\/\/informatoo.com\/","name":"informatoo.com","description":"","publisher":{"@id":"https:\/\/informatoo.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/informatoo.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/informatoo.com\/#organization","name":"informatoo.com","url":"https:\/\/informatoo.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/informatoo.com\/#\/schema\/logo\/image\/","url":"https:\/\/informatoo.com\/wp-content\/uploads\/2024\/10\/logo.png","contentUrl":"https:\/\/informatoo.com\/wp-content\/uploads\/2024\/10\/logo.png","width":32,"height":59,"caption":"informatoo.com"},"image":{"@id":"https:\/\/informatoo.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/pages\/5080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/comments?post=5080"}],"version-history":[{"count":6,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/pages\/5080\/revisions"}],"predecessor-version":[{"id":5086,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/pages\/5080\/revisions\/5086"}],"wp:attachment":[{"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/media?parent=5080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/categories?post=5080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/tags?post=5080"},{"taxonomy":"ai_version","embeddable":true,"href":"https:\/\/informatoo.com\/en\/wp-json\/wp\/v2\/ai_version?post=5080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}