{"id":34771,"date":"2025-09-01T10:15:15","date_gmt":"2025-09-01T08:15:15","guid":{"rendered":"https:\/\/owm-summit.de\/?page_id=34771"},"modified":"2025-09-11T16:23:41","modified_gmt":"2025-09-11T14:23:41","slug":"profilbildgenerator","status":"publish","type":"page","link":"https:\/\/owm-summit.de\/en\/profilbildgenerator\/","title":{"rendered":"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"34771\" class=\"elementor elementor-34771\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e671c10 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e671c10\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-003ab62\" data-id=\"003ab62\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-42b49a9 elementor-widget__width-initial elementor-widget-tablet__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"42b49a9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<span id=\"42b49a9\"><\/span>\t\t\t\t<h1>Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b<\/h1>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bcbde9f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bcbde9f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4075bed\" data-id=\"4075bed\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-58152bc elementor-widget elementor-widget-html\" data-id=\"58152bc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<span id=\"58152bc\"><\/span><!--\n  OWM Future Ready \u2013 Eigenst\u00e4ndiger Bildgenerator (HTML Widget)\n  - Eigenes Modul, unabh\u00e4ngig vom bisherigen\n  - Upload (Button + Dropzone) & Drag&Drop\n  - Panning (Drag) & Zoom (Wheel\/Slider)\n  - Pan-Slider: unten (X) & rechts (Y)\n  - Ausgabe 1:1 (1400\u00d71400)\n  - Foto immer Schwarz\/Wei\u00df, Overlay (OWM) bleibt bunt\n-->\n\n<div class=\"owm-fr-widget\" data-overlay=\"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2025\/09\/250909_OWM_Generator_Template.png\">\n  <style>\n    .owm-fr-widget{--gap:14px;--muted:#333;--fg:#000;--accent:#0284c7;--pad:24px}\n    .owm-fr-widget{font-family:REALGAR, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';color:var(--fg);background:transparent;padding:var(--pad)}\n    .fr-grid{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr;align-items:start\n        display: flex;\n        align-items: stretch;\n       \n    }\n    @media (max-width: 900px){.fr-grid{grid-template-columns:1fr};\n    }\n    .fr-card{background:transparent;border:1px solid #ccc;border-radius:16px;padding:16px;display:flex;flex-direction:column;  justify-content: center;}\n    .fr-title{font-size:clamp(18px,2.3vw,26px);letter-spacing:.2px;margin:0 0 12px;color:#000}\n    .fr-muted{color:var(--muted);font-size:13.5px}\n\n    .field{display:flex;flex-direction:column;gap:8px}\n    .field label{font-weight:600;color:#000}\n    .btn{appearance:none;border:1px  solid #000!important ;background:#fff !important;color:#000;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}\n    .btn[disabled]{opacity:.5;cursor:not-allowed}\n    .btn :hover {\n        background: rgb(255, 255, 0) !important;\n    }\n    .fr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}\n\n    .fr-preview{position:relative;display:flex;flex-direction:column}\n    .canvas-wrap{display:flex;align-items:center;justify-content:center;background:transparent;border-radius:16px;}\n    canvas{max-width:100%;height:auto;max-height:400px;border-radius:12px;touch-action:none}\n\n    \/* Pan controls *\/\n    .pan-wrap{position:relative}\n    .pan-y{position:absolute;right:8px;top:10px;bottom:10px;width:24px;writing-mode: bt-lr;-webkit-appearance: slider-vertical}\n    .pan-x{width:100%}\n    .pan-x-row{margin-top:28px;\n        width: 80% !Important;\n        margin-left: 10%;\n    }\n\n    \/* Accessible visually hidden (keine hidden-Attr) *\/\n    .sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:0}\n    \n    \/* Buttons in beiden Modulen (altes & neues) *\/\n.owm-fr-widget .btn,\n.bw-overlay-tool .btn {\n  width: 100%;\n  display: block;\n  box-sizing: border-box;\n  background: rgb(255, 255, 0);;         \/* gelb *\/\n  color: #000;\n  border: 2px solid rgb(30, 64, 175);;\n  border-radius: 12px;\n  padding: 12px 16px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: border-color .2s ease, box-shadow .2s ease;\n}\n\n\/* Vollbreit auch in Flex-Containern *\/\n.owm-fr-widget .fr-actions .btn { flex: 1 0 100%; }\n.bw-overlay-tool .bw-actions .btn { flex: 1 0 100%; }\n\n\/* Hover: blauer Rahmen *\/\n.owm-fr-widget .btn:hover,\n.bw-overlay-tool .btn:hover {\n  border-color: #1e40af;       \/* blau *\/\n}\n\n\/* Tastaturfokus klar sichtbar *\/\n.owm-fr-widget .btn:focus-visible,\n.bw-overlay-tool .btn:focus-visible {\n  outline: none;\n  border-color: #1e40af;\n  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.25);\n}\n\n\/* Disabled-Zustand *\/\n.owm-fr-widget .btn[disabled],\n.bw-overlay-tool .btn[disabled] {\n  opacity: .6;\n  cursor: not-allowed;\n}\n\n\/* ===== Slider-Styling (gelber Knopf, blaue Linie) mit deinen Farbt\u00f6nen ===== *\/\n.owm-fr-widget input[type=\"range\"]{\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  height: 28px;\n  cursor: pointer;\n}\n\n\/* HORIZONTAL: #fr-zoom & #fr-pan-x \u2013 TRACK *\/\n.owm-fr-widget #fr-zoom::-webkit-slider-runnable-track,\n.owm-fr-widget #fr-pan-x::-webkit-slider-runnable-track{\n  height: 6px;\n  background: rgb(30, 64, 175);            \/* dein Blau *\/\n  border-radius: 999px;\n}\n.owm-fr-widget #fr-zoom::-moz-range-track,\n.owm-fr-widget #fr-pan-x::-moz-range-track{\n  height: 6px;\n  background: rgb(30, 64, 175);            \/* dein Blau *\/\n  border-radius: 999px;\n}\n.owm-fr-widget #fr-zoom::-ms-track,\n.owm-fr-widget #fr-pan-x::-ms-track{\n  height: 6px;\n  border: none;\n  color: transparent;\n  background: rgb(30, 64, 175);            \/* dein Blau *\/\n  border-radius: 999px;\n}\n\n\/* HORIZONTAL: THUMB (gelb) *\/\n.owm-fr-widget #fr-zoom::-webkit-slider-thumb,\n.owm-fr-widget #fr-pan-x::-webkit-slider-thumb{\n  -webkit-appearance: none;\n  width: 20px; height: 20px;\n  border-radius: 50%;\n  background: rgb(255, 255, 0);            \/* dein Gelb *\/\n  border: 2px solid #111;\n  margin-top: -7px;                         \/* (Thumb\/2 - Track\/2) *\/\n  transition: box-shadow .2s ease, transform .05s ease;\n}\n.owm-fr-widget #fr-zoom::-moz-range-thumb,\n.owm-fr-widget #fr-pan-x::-moz-range-thumb{\n  width: 20px; height: 20px;\n  border-radius: 50%;\n  background: rgb(255, 255, 0);            \/* dein Gelb *\/\n  border: 2px solid #111;\n  transition: box-shadow .2s ease, transform .05s ease;\n}\n.owm-fr-widget #fr-zoom::-ms-thumb,\n.owm-fr-widget #fr-pan-x::-ms-thumb{\n  width: 20px; height: 20px;\n  border-radius: 50%;\n  background: rgb(255, 255, 0);            \/* dein Gelb *\/\n  border: 2px solid #111;\n}\n\n\/* VERTIKAL: #fr-pan-y *\/\n.owm-fr-widget #fr-pan-y{\n  -webkit-appearance: slider-vertical;\n  writing-mode: bt-lr;\n  width: 28px;\n  height: 100%;\n}\n\n\/* VERTIKAL: TRACK *\/\n.owm-fr-widget #fr-pan-y::-webkit-slider-runnable-track{\n  width: 6px;\n  background: rgb(30, 64, 175);            \/* dein Blau *\/\n  border-radius: 999px;\n  margin: 0 auto;\n}\n.owm-fr-widget #fr-pan-y::-moz-range-track{\n  width: 6px;\n  background: rgb(30, 64, 175);            \/* dein Blau *\/\n  border-radius: 999px;\n}\n.owm-fr-widget #fr-pan-y::-ms-track{\n  width: 6px;\n  border: none;\n  color: transparent;\n  background: rgb(30, 64, 175);            \/* dein Blau *\/\n  border-radius: 999px;\n}\n\n\/* VERTIKAL: THUMB (gelb) *\/\n.owm-fr-widget #fr-pan-y::-webkit-slider-thumb{\n  -webkit-appearance: none;\n  width: 20px; height: 20px;\n  border-radius: 50%;\n  background: rgb(255, 255, 0);            \/* dein Gelb *\/\n  border: 2px solid #111;\n  margin-left: -7px;                        \/* (Thumb\/2 - Track\/2) *\/\n  transition: box-shadow .2s ease, transform .05s ease;\n}\n.owm-fr-widget #fr-pan-y::-moz-range-thumb{\n  width: 20px; height: 20px;\n  border-radius: 50%;\n  background: rgb(255, 255, 0);            \/* dein Gelb *\/\n  border: 2px solid #111;\n}\n.owm-fr-widget #fr-pan-y::-ms-thumb{\n  width: 20px; height: 20px;\n  border-radius: 50%;\n  background: rgb(255, 255, 0);            \/* dein Gelb *\/\n  border: 2px solid #111;\n}\n\n\/* Hover\/Active\/Focus \u2013 Fokus-Glow in deinem Blau *\/\n.owm-fr-widget input[type=\"range\"]:hover::-webkit-slider-thumb{ box-shadow: 0 0 0 3px rgba(30, 64, 175, .25); }\n.owm-fr-widget input[type=\"range\"]:active::-webkit-slider-thumb{ transform: scale(0.96); }\n.owm-fr-widget input[type=\"range\"]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 4px rgba(30, 64, 175, .35); outline: none; }\n\n.owm-fr-widget input[type=\"range\"]:hover::-moz-range-thumb{ box-shadow: 0 0 0 3px rgba(30, 64, 175, .25); }\n.owm-fr-widget input[type=\"range\"]:active::-moz-range-thumb{ transform: scale(0.96); }\n.owm-fr-widget input[type=\"range\"]:focus-visible{ outline: none; }\n.owm-fr-widget input[type=\"range\"]:focus-visible::-moz-range-thumb{ box-shadow: 0 0 0 4px rgba(30, 64, 175, .35); }\n\n\/* Disabled *\/\n.owm-fr-widget input[type=\"range\"][disabled]{\n  opacity: .6;\n  cursor: not-allowed;\n}\n\n.btn:hover {\n    background: rgb(255, 255, 0) !Important;\n}\n\n  <\/style>\n  \n  \n\n  <div class=\"fr-grid\">\n    <div class=\"fr-card\" aria-label=\"Werkzeuge\">\n     \n     \n\n      <div class=\"field\">\n        <label style=\"font-family: REALGAR;\">1. Bild hochladen<\/label>\n          <div class=\"fr-muted\" style=\"font-size:12px; font-family: REALGAR;\">Bitte nutze ein Bild ohne Hintergrund oder mit wei\u00dfem Hintergrund. So bleibt der Fokus ganz auf dir.\n      <\/div>\n        <label class=\"dropzone\" id=\"fr-dz\" for=\"fr-file\" tabindex=\"0\" style=\"display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;border:2px dashed var(--accent);border-radius:16px;cursor:pointer;transition:.2s ease;background:transparent\">\n          <div>\n            <strong style=\"font-family: REALGAR;\">Bild hierher ziehen<\/strong>\n            \n          <\/div>\n          \n        <\/label>\n         <label style=\"font-family: REALGAR; text-align:center;\"> oder<\/label>\n        <input id=\"fr-file\" type=\"file\" accept=\"image\/*\" class=\"sr-only\">\n        <button type=\"button\" class=\"btn\" id=\"fr-choose\">Datei ausw\u00e4hlen<\/button>\n      <\/div>\n\n      <div class=\"field\">\n          <div style=\"height:20px\"><\/div>\n        <label style=\"font-family: REALGAR;\">2. Zoom<\/label>\n        <div class=\"fr-muted\" style=\"font-size:12px; font-family: REALGAR;\">Zoome dein hochgeladenes Bild nach Belieben rein oder raus, bis es optimal wirkt.\n      <\/div>\n        <div style=\"display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center\">\n          <input id=\"fr-zoom\" type=\"range\" min=\"1\" max=\"3\" step=\"0.001\" value=\"1\" disabled>\n          <span id=\"fr-zoom-val\" class=\"fr-muted\" style=\"font-size:12px\">1.00\u00d7<\/span>\n        <\/div>\n         \n         \n         <div>\n             <div style=\"height:20px\"><\/div>\n             <label style=\"font-family: REALGAR;\"><strong>3. Bildausschnitt ausw\u00e4hlen<\/strong><\/label>\n         <div class=\"fr-muted\" style=\"font-size:12px; font-family: REALGAR; line-height: 1.5;\">Bestimme den passenden Bildausschnitt mit den Reglern rechts und unten im Feld.\n      <\/div><br>\n         <\/div>\n          <\/div>\n        \n\n      <div class=\"fr-actions\">\n        <button class=\"btn\" id=\"fr-download\" disabled>Bild herunterladen<\/button>\n        <span class=\"fr-muted\" id=\"fr-status\" role=\"status\" aria-live=\"polite\" style=\"font-size:12px; font-family: REALGAR;\"><\/span>\n      <\/div>\n    <\/div>\n    \n\n    <div class=\"fr-card fr-preview\" aria-label=\"Vorschau\">\n         \n      <div class=\"canvas-wrap pan-wrap\">\n        <canvas id=\"fr-canvas\" width=\"1400\" height=\"1400\"><\/canvas>\n        <input type=\"range\" id=\"fr-pan-y\" class=\"pan-y\" disabled>\n      <\/div>\n      <div class=\"pan-x-row\"><input type=\"range\" id=\"fr-pan-x\" class=\"pan-x\" disabled><\/div>\n      \n    <\/div>\n  <\/div>\n\n  <script>\n    (function(){\n      var root = document.currentScript.closest('.owm-fr-widget');\n      if(!root){ console.error('owm-fr-widget root not found'); return; }\n\n      var OVERLAY_URL = root.getAttribute('data-overlay');\n      var canvas = root.querySelector('#fr-canvas');\n      var ctx = canvas.getContext('2d');\n\n      var dz = root.querySelector('#fr-dz');\n      var fileInput = root.querySelector('#fr-file');\n      var chooseBtn = root.querySelector('#fr-choose');\n      var zoomRange = root.querySelector('#fr-zoom');\n      var zoomVal = root.querySelector('#fr-zoom-val');\n      var panX = root.querySelector('#fr-pan-x');\n      var panY = root.querySelector('#fr-pan-y');\n      var downloadBtn = root.querySelector('#fr-download');\n      var status = root.querySelector('#fr-status');\n\n      var baseImage = null; \/\/ ImageBitmap | HTMLImageElement\n      var overlayImage = null;\n      var targetSize = 1400;\n\n      var scale = 1, minScale = 1, maxScale = 3;\n      var offX = 0, offY = 0;\n      var dragging = false, lastX = 0, lastY = 0;\n\n      function setStatus(msg){ status.textContent = msg || ''; }\n\n      function fitCover(){\n        if(!baseImage) return;\n        var iw = baseImage.width, ih = baseImage.height;\n        minScale = Math.max(canvas.width\/iw, canvas.height\/ih);\n        if(!(minScale>0 && isFinite(minScale))) minScale = 1;\n        scale = Math.max(scale, minScale);\n        maxScale = Math.max(minScale*4, minScale+0.001);\n        zoomRange.min = String(minScale);\n        zoomRange.max = String(maxScale);\n        zoomRange.step = String(minScale\/600);\n        zoomRange.value = String(scale);\n        zoomRange.disabled = false;\n        zoomVal.textContent = scale.toFixed(2)+'\u00d7';\n        var dw = iw*scale, dh = ih*scale;\n        offX = (canvas.width - dw)\/2;\n        offY = (canvas.height - dh)\/2;\n        clampOffset();\n        updatePanRanges();\n        syncPanUI();\n      }\n\n      function clampOffset(){\n        if(!baseImage) return;\n        var iw = baseImage.width*scale, ih = baseImage.height*scale;\n        var minX = Math.min(0, canvas.width - iw);\n        var minY = Math.min(0, canvas.height - ih);\n        offX = Math.max(minX, Math.min(0, offX));\n        offY = Math.max(minY, Math.min(0, offY));\n      }\n\n      function getPanBounds(){\n        if(!baseImage){ return {minX:0,minY:0}; }\n        var iw = baseImage.width*scale, ih = baseImage.height*scale;\n        return { minX: Math.min(0, canvas.width - iw), minY: Math.min(0, canvas.height - ih) };\n      }\n\n      function updatePanRanges(){\n        var b = getPanBounds();\n        panX.min = String(b.minX); panX.max = '0'; panX.step = '1'; panX.value = String(offX); panX.disabled = false;\n        panY.min = String(b.minY); panY.max = '0'; panY.step = '1'; panY.value = String(offY); panY.disabled = false;\n      }\n      function syncPanUI(){ panX.value = String(offX); panY.value = String(offY); }\n\n      function setScale(newScale, cx, cy){\n        if(!baseImage) return;\n        cx = (typeof cx==='number')?cx:canvas.width\/2;\n        cy = (typeof cy==='number')?cy:canvas.height\/2;\n        var old = scale;\n        newScale = Math.max(minScale, Math.min(maxScale, newScale));\n        var iw = baseImage.width, ih = baseImage.height;\n        var preW = iw*old, preH = ih*old;\n        var postW = iw*newScale, postH = ih*newScale;\n        var relX = (cx - offX)\/preW;\n        var relY = (cy - offY)\/preH;\n        scale = newScale;\n        offX = cx - relX*postW;\n        offY = cy - relY*postH;\n        clampOffset();\n        zoomRange.value = String(scale);\n        zoomVal.textContent = scale.toFixed(2)+'\u00d7';\n        updatePanRanges();\n        syncPanUI();\n        render();\n      }\n\n      function toGrayManual(){\n        try{\n          var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);\n          var d = imgData.data;\n          for(var i=0;i<d.length;i+=4){\n            var y = 0.299*d[i] + 0.587*d[i+1] + 0.114*d[i+2];\n            d[i]=d[i+1]=d[i+2]=y;\n          }\n          ctx.putImageData(imgData,0,0);\n        }catch(e){}\n      }\n\n      function render(){\n        ctx.clearRect(0,0,canvas.width,canvas.height);\n        if(!baseImage){ setStatus(''); return; }\n        setStatus('');\n\n        var useFilter = ('filter' in ctx);\n        if(useFilter){\n          \/\/ Foto in S\/W\n          ctx.filter = 'grayscale(100%)';\n          ctx.drawImage(baseImage, offX, offY, baseImage.width*scale, baseImage.height*scale);\n          ctx.filter = 'none';\n        } else {\n          \/\/ Fallback: Foto farbig, dann ents\u00e4ttigen\n          ctx.drawImage(baseImage, offX, offY, baseImage.width*scale, baseImage.height*scale);\n          toGrayManual();\n        }\n        \/\/ Overlay bunt, fix unten rechts\n        if(overlayImage){\n          var pad = 0; \/\/ px Abstand\n          var ovlW = Math.round(canvas.width * 1); \/\/ 33% Breite\n          var ratio = overlayImage.width \/ overlayImage.height;\n          var ovlH = Math.round(ovlW \/ ratio);\n          var x = canvas.width - pad - ovlW;\n          var y = canvas.height - pad - ovlH;\n          ctx.drawImage(overlayImage, x, y, ovlW, ovlH);\n        }\n      }\n\n      function download(){\n        try{\n          var url = canvas.toDataURL('image\/png');\n          var a = document.createElement('a');\n          a.href = url; a.download = 'bild_owm_overlay_1400.png';\n          document.body.appendChild(a); a.click(); a.remove();\n        }catch(err){ setStatus('Download nicht m\u00f6glich (CORS?).'); }\n      }\n\n      \/\/ ===== Helpers =====\n      function fileToImage(file){\n        return new Promise(function(resolve, reject){\n          try{\n            if(window.createImageBitmap){\n              createImageBitmap(file, { imageOrientation: 'from-image' }).then(resolve).catch(function(){\n                createImageBitmap(file).then(resolve).catch(function(){\n                  var img = new Image();\n                  img.onload = function(){ resolve(img); };\n                  img.onerror = reject;\n                  img.src = URL.createObjectURL(file);\n                });\n              });\n              return;\n            }\n          }catch(e){}\n          var img = new Image();\n          img.onload = function(){ resolve(img); };\n          img.onerror = reject;\n          img.src = URL.createObjectURL(file);\n        });\n      }\n      function urlToImage(url){\n        return new Promise(function(resolve, reject){\n          var img = new Image();\n          \/\/ kein crossOrigin gesetzt: gleiches Origin auf WP ist ideal\n          img.onload = function(){ resolve(img); };\n          img.onerror = function(){ reject(new Error('Overlay konnte nicht geladen werden.')); };\n          img.src = url;\n        });\n      }\n\n      function afterBaseLoaded(){\n        fitCover();\n        downloadBtn.disabled = false;\n        render();\n      }\n\n      \/\/ ===== Upload & DnD (nur Modul-intern) =====\n      document.addEventListener('dragover', function(e){ if(!root.contains(e.target)) e.preventDefault(); }, true);\n      document.addEventListener('drop', function(e){ if(!root.contains(e.target)) e.preventDefault(); }, true);\n\n      ['dragenter','dragover','dragleave','drop'].forEach(function(name){\n        dz.addEventListener(name, function(e){ e.preventDefault(); e.stopPropagation(); }, false);\n      });\n      ['dragenter','dragover'].forEach(function(ev){ dz.addEventListener(ev, function(){ dz.style.borderColor = '#38bdf8'; }, false); });\n      ['dragleave','drop'].forEach(function(ev){ dz.addEventListener(ev, function(){ dz.style.borderColor = 'var(--accent)'; }, false); });\n\n      dz.addEventListener('drop', function(e){\n        var dt = e.dataTransfer;\n        if(dt && dt.files && dt.files.length){\n          var file = dt.files[0];\n          setStatus('');\n          fileToImage(file).then(function(img){ baseImage = img; afterBaseLoaded(); }).catch(function(){ setStatus('Konnte Bild nicht laden.'); });\n        }\n      }, false);\n\n      dz.addEventListener('click', function(){ fileInput.value=''; fileInput.click(); });\n      dz.addEventListener('keydown', function(e){ if(e.key==='Enter' || e.key===' '){ e.preventDefault(); fileInput.value=''; fileInput.click(); } });\n\n      chooseBtn.addEventListener('click', function(){ fileInput.value=''; fileInput.click(); });\n      fileInput.addEventListener('change', function(){\n        var file = fileInput.files && fileInput.files[0];\n        if(file){ setStatus(''); fileToImage(file).then(function(img){ baseImage = img; afterBaseLoaded(); }).catch(function(){ setStatus('Konnte Bild nicht laden.'); }); }\n      });\n\n      \/\/ ===== Panning & Zoom =====\n      canvas.addEventListener('pointerdown', function(e){ dragging=true; lastX=e.clientX; lastY=e.clientY; if(canvas.setPointerCapture) canvas.setPointerCapture(e.pointerId); });\n      canvas.addEventListener('pointermove', function(e){ if(!dragging) return; var dx=e.clientX-lastX; var dy=e.clientY-lastY; lastX=e.clientX; lastY=e.clientY; offX+=dx; offY+=dy; clampOffset(); syncPanUI(); render(); });\n      window.addEventListener('pointerup', function(e){ dragging=false; try{ if(canvas.releasePointerCapture) canvas.releasePointerCapture(e.pointerId);}catch(_){}});\n\n      canvas.addEventListener('wheel', function(e){\n        if(!baseImage) return; e.preventDefault();\n        var rect = canvas.getBoundingClientRect();\n        var cx = (e.clientX - rect.left) * (canvas.width \/ rect.width);\n        var cy = (e.clientY - rect.top) * (canvas.height \/ rect.height);\n        var factor = Math.exp(-e.deltaY * 0.001);\n        setScale(scale * factor, cx, cy);\n      }, {passive:false});\n\n      zoomRange.addEventListener('input', function(){ setScale(parseFloat(zoomRange.value)); });\n      panX.addEventListener('input', function(){ offX = parseInt(panX.value,10)||0; clampOffset(); syncPanUI(); render(); });\n      panY.addEventListener('input', function(){ offY = parseInt(panY.value,10)||0; clampOffset(); syncPanUI(); render(); });\n\n      downloadBtn.addEventListener('click', download);\n\n      \/\/ ===== Init =====\n      canvas.width = targetSize; canvas.height = targetSize;\n      urlToImage(OVERLAY_URL).then(function(img){ overlayImage = img; render(); }).catch(function(e){ setStatus(e.message); });\n    })();\n  <\/script>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b 1. Bild hochladen Bitte nutze ein Bild ohne Hintergrund oder mit wei\u00dfem Hintergrund. So bleibt der Fokus ganz auf dir. Bild hierher ziehen oder [&hellip;]<\/p>","protected":false},"author":1627,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-34771","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b - OWM Summit<\/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:\/\/owm-summit.de\/en\/profilbildgenerator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b - OWM Summit\" \/>\n<meta property=\"og:description\" content=\"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b 1. Bild hochladen Bitte nutze ein Bild ohne Hintergrund oder mit wei\u00dfem Hintergrund. So bleibt der Fokus ganz auf dir. Bild hierher ziehen oder [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/owm-summit.de\/en\/profilbildgenerator\/\" \/>\n<meta property=\"og:site_name\" content=\"OWM Summit\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-11T14:23:41+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:\/\/owm-summit.de\/profilbildgenerator\/\",\"url\":\"https:\/\/owm-summit.de\/profilbildgenerator\/\",\"name\":\"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b - OWM Summit\",\"isPartOf\":{\"@id\":\"https:\/\/owm-summit.de\/#website\"},\"datePublished\":\"2025-09-01T08:15:15+00:00\",\"dateModified\":\"2025-09-11T14:23:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/owm-summit.de\/profilbildgenerator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/owm-summit.de\/profilbildgenerator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/owm-summit.de\/profilbildgenerator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/owm-summit.de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/owm-summit.de\/#website\",\"url\":\"https:\/\/owm-summit.de\/\",\"name\":\"OWM Summit\",\"description\":\"OWM Summit 2025\",\"publisher\":{\"@id\":\"https:\/\/owm-summit.de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/owm-summit.de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/owm-summit.de\/#organization\",\"name\":\"OWM Summit\",\"url\":\"https:\/\/owm-summit.de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/owm-summit.de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2020\/02\/owm-logo-black.svg\",\"contentUrl\":\"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2020\/02\/owm-logo-black.svg\",\"width\":250,\"height\":100,\"caption\":\"OWM Summit\"},\"image\":{\"@id\":\"https:\/\/owm-summit.de\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b - OWM Summit","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:\/\/owm-summit.de\/en\/profilbildgenerator\/","og_locale":"en_US","og_type":"article","og_title":"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b - OWM Summit","og_description":"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b 1. Bild hochladen Bitte nutze ein Bild ohne Hintergrund oder mit wei\u00dfem Hintergrund. So bleibt der Fokus ganz auf dir. Bild hierher ziehen oder [&hellip;]","og_url":"https:\/\/owm-summit.de\/en\/profilbildgenerator\/","og_site_name":"OWM Summit","article_modified_time":"2025-09-11T14:23:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/owm-summit.de\/profilbildgenerator\/","url":"https:\/\/owm-summit.de\/profilbildgenerator\/","name":"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b - OWM Summit","isPartOf":{"@id":"https:\/\/owm-summit.de\/#website"},"datePublished":"2025-09-01T08:15:15+00:00","dateModified":"2025-09-11T14:23:41+00:00","breadcrumb":{"@id":"https:\/\/owm-summit.de\/profilbildgenerator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/owm-summit.de\/profilbildgenerator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/owm-summit.de\/profilbildgenerator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/owm-summit.de\/"},{"@type":"ListItem","position":2,"name":"Bild Generator f\u00fcr OWM Summit Teilnehmer\u200b"}]},{"@type":"WebSite","@id":"https:\/\/owm-summit.de\/#website","url":"https:\/\/owm-summit.de\/","name":"OWM Summit","description":"OWM Summit 2025","publisher":{"@id":"https:\/\/owm-summit.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/owm-summit.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/owm-summit.de\/#organization","name":"OWM Summit","url":"https:\/\/owm-summit.de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/owm-summit.de\/#\/schema\/logo\/image\/","url":"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2020\/02\/owm-logo-black.svg","contentUrl":"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2020\/02\/owm-logo-black.svg","width":250,"height":100,"caption":"OWM Summit"},"image":{"@id":"https:\/\/owm-summit.de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/pages\/34771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/users\/1627"}],"replies":[{"embeddable":true,"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/comments?post=34771"}],"version-history":[{"count":278,"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/pages\/34771\/revisions"}],"predecessor-version":[{"id":35137,"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/pages\/34771\/revisions\/35137"}],"wp:attachment":[{"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/media?parent=34771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/categories?post=34771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owm-summit.de\/en\/wp-json\/wp\/v2\/tags?post=34771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}