{"id":521,"date":"2026-02-18T17:03:35","date_gmt":"2026-02-18T17:03:35","guid":{"rendered":"https:\/\/medicsonthemoveforwhatmatters.org\/?page_id=521"},"modified":"2026-02-18T17:03:35","modified_gmt":"2026-02-18T17:03:35","slug":"maak-een-foto-als-arts-in-ruste","status":"publish","type":"page","link":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/maak-een-foto-als-arts-in-ruste\/","title":{"rendered":"Maak een foto &#8211; &#8220;Als arts in ruste&#8230;&#8221;"},"content":{"rendered":"\n<div style=\"max-width:720px;margin:0 auto;padding:16px;border:1px solid #ddd;border-radius:12px\">\n  <h2 style=\"margin-top:0\">Upload je foto \u2192 download met tekst<\/h2>\n\n  <input id=\"motmFile\" type=\"file\" accept=\"image\/*\" \/>\n  <p style=\"margin:8px 0 16px 0;opacity:.8\">\n    Je foto wordt lokaal in je browser verwerkt en niet opgeslagen.\n  <\/p>\n\n  <canvas id=\"motmCanvas\" style=\"width:100%;display:none;border-radius:12px\"><\/canvas>\n\n  <div style=\"display:flex;gap:12px;flex-wrap:wrap;margin-top:16px\">\n    <button id=\"motmDownload\" type=\"button\" disabled\n      style=\"padding:10px 14px;border-radius:10px;border:1px solid #333;background:#111;color:#fff;cursor:pointer\">\n      Download afbeelding\n    <\/button>\n\n    <button id=\"motmReset\" type=\"button\"\n      style=\"padding:10px 14px;border-radius:10px;border:1px solid #333;background:#fff;color:#111;cursor:pointer\">\n      Reset\n    <\/button>\n  <\/div>\n<\/div>\n\n<script>\n(() => {\n  \/\/ \u2705 PAS HIER JE TEKST AAN\n  const SLOGAN = \"Als arts in ruste kom ik op voor het humanitair recht.\";\n\n  const fileInput = document.getElementById(\"motmFile\");\n  const canvas = document.getElementById(\"motmCanvas\");\n  const ctx = canvas.getContext(\"2d\");\n  const btnDownload = document.getElementById(\"motmDownload\");\n  const btnReset = document.getElementById(\"motmReset\");\n\n  let lastMime = \"image\/png\";\n\n  function wrapText(ctx, text, maxWidth) {\n    const words = text.split(\/\\s+\/);\n    const lines = [];\n    let line = \"\";\n    for (const w of words) {\n      const test = line ? (line + \" \" + w) : w;\n      if (ctx.measureText(test).width <= maxWidth) line = test;\n      else { if (line) lines.push(line); line = w; }\n    }\n    if (line) lines.push(line);\n    return lines;\n  }\n\nfunction drawWithOverlay(img) {\n  const LOGO_URL = \"https:\/\/medicsonthemoveforwhatmatters.org\/wp-content\/uploads\/2026\/02\/MOMLogo_MacBook-Air-van-Adam.local_Sep-14-165715-2025_CaseConflict.png\";\n  canvas.width = img.naturalWidth;\n  canvas.height = img.naturalHeight;\n\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  ctx.drawImage(img, 0, 0);\n\n  const TEXT = SLOGAN;\n  const COLOR = \"#ff7a00\";\n\n  \/\/ === GROTE TEKST ===\n  const base = Math.min(canvas.width, canvas.height);\n  let fontSize = Math.round(base * 0.22); \/\/ \ud83d\udd25 nog groter\n  fontSize = Math.max(120, Math.min(fontSize, 600));\n\n  ctx.font = `900 ${fontSize}px system-ui, -apple-system, Segoe UI, Roboto, Arial`;\n\n  \/\/ === LINKS UITGELIJND ===\n  ctx.textAlign = \"left\";\n  ctx.textBaseline = \"top\";\n\n  \/\/ === MARGES ===\n  const PADDING_X = Math.round(canvas.width * 0.06); \/\/ links marge\n  const PADDING_TOP = Math.round(canvas.height * 0.10); \/\/ hoger geplaatst\n\n  const maxTextWidth = canvas.width - (PADDING_X * 2);\n\n  \/\/ wrap\n  let lines = wrapText(ctx, TEXT, maxTextWidth);\n\n  \/\/ Max 2 regels, anders iets verkleinen\n  while (lines.length > 2 && fontSize > 80) {\n    fontSize -= 10;\n    ctx.font = `900 ${fontSize}px system-ui, -apple-system, Segoe UI, Roboto, Arial`;\n    lines = wrapText(ctx, TEXT, maxTextWidth);\n  }\n\n  \/\/ === EXTRA CONTRAST ===\n  ctx.lineJoin = \"round\";\n  ctx.lineWidth = Math.max(4, Math.round(fontSize * 0.06));\n  ctx.strokeStyle = \"rgba(0,0,0,0.6)\";\n  ctx.fillStyle = COLOR;\n\n  \/\/ Schaduw\n  ctx.shadowColor = \"rgba(0,0,0,0.45)\";\n  ctx.shadowBlur = Math.round(fontSize * 0.15);\n  ctx.shadowOffsetX = 0;\n  ctx.shadowOffsetY = Math.round(fontSize * 0.05);\n\n  \/\/ Plaatsing in onderste 1\/3 van de foto\nconst lowerThirdStart = canvas.height * 0.80; \/\/ 80% van hoogte\nlet y = lowerThirdStart;\n\n\n  for (const line of lines) {\n    ctx.strokeText(line, PADDING_X, y);\n    ctx.fillText(line, PADDING_X, y);\n    y += fontSize * 1.05;\n  }\n\n  ctx.shadowColor = \"transparent\";\n\n\/\/ === LOGO RECHTSBOVEN ===\nconst logo = new Image();\nlogo.onload = function() {\n  const logoWidth = canvas.width * 0.10; \/\/ 10% van breedte\n  const logoHeight = logoWidth * (logo.height \/ logo.width);\n\n  const margin = canvas.width * 0.04;\n\n  ctx.drawImage(\n    logo,\n    canvas.width - logoWidth - margin,\n    margin,\n    logoWidth,\n    logoHeight\n  );\n};\nlogo.src = LOGO_URL;\n\n\n  canvas.style.display = \"block\";\n  btnDownload.disabled = false;\n}\n\n\n  fileInput.addEventListener(\"change\", () => {\n    const file = fileInput.files && fileInput.files[0];\n    if (!file) return;\n\n    lastMime = (file.type && file.type.startsWith(\"image\/\")) ? file.type : \"image\/png\";\n\n    const img = new Image();\n    img.onload = () => drawWithOverlay(img);\n    img.onerror = () => alert(\"Kon de afbeelding niet laden. Probeer een andere foto.\");\n    img.src = URL.createObjectURL(file);\n  });\n\n  btnDownload.addEventListener(\"click\", () => {\n    const preferJpeg = (lastMime === \"image\/jpeg\" || lastMime === \"image\/jpg\");\n    const mime = preferJpeg ? \"image\/jpeg\" : \"image\/png\";\n    const quality = preferJpeg ? 0.92 : 1.0;\n\n    canvas.toBlob((blob) => {\n      if (!blob) return;\n      const a = document.createElement(\"a\");\n      const url = URL.createObjectURL(blob);\n      a.href = url;\n      a.download = preferJpeg ? \"photo-with-text.jpg\" : \"photo-with-text.png\";\n      document.body.appendChild(a);\n      a.click();\n      a.remove();\n      URL.revokeObjectURL(url);\n    }, mime, quality);\n  });\n\n  btnReset.addEventListener(\"click\", () => {\n    fileInput.value = \"\";\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    canvas.style.display = \"none\";\n    btnDownload.disabled = true;\n  });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Upload je foto \u2192 download met tekst Je foto wordt lokaal in je browser verwerkt en niet opgeslagen. Download afbeelding Reset<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-521","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/pages\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":1,"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/pages\/521\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/pages\/521\/revisions\/522"}],"wp:attachment":[{"href":"https:\/\/medicsonthemoveforwhatmatters.org\/index.php\/wp-json\/wp\/v2\/media?parent=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}