{"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":"\t\t<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>\n\t\t","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 Datei ausw\u00e4hlen 2. Zoom Zoome dein hochgeladenes Bild nach Belieben rein oder raus, bis es optimal wirkt. 1.00\u00d7 3. Bildausschnitt ausw\u00e4hlen Bestimme den passenden Bildausschnitt [&hellip;]<\/p>\n","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 Datei ausw\u00e4hlen 2. Zoom Zoome dein hochgeladenes Bild nach Belieben rein oder raus, bis es optimal wirkt. 1.00\u00d7 3. Bildausschnitt ausw\u00e4hlen Bestimme den passenden Bildausschnitt [&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 2026\",\"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_Web.svg\",\"contentUrl\":\"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2020\/02\/OWM_Logo_Web.svg\",\"width\":355,\"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 Datei ausw\u00e4hlen 2. Zoom Zoome dein hochgeladenes Bild nach Belieben rein oder raus, bis es optimal wirkt. 1.00\u00d7 3. Bildausschnitt ausw\u00e4hlen Bestimme den passenden Bildausschnitt [&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 2026","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_Web.svg","contentUrl":"https:\/\/owm-summit.de\/wp-content\/uploads\/sites\/36\/2020\/02\/OWM_Logo_Web.svg","width":355,"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}]}}