{"id":1203,"date":"2026-07-08T09:27:28","date_gmt":"2026-07-08T09:27:28","guid":{"rendered":"https:\/\/printiteasy.eu\/creer-couverture\/"},"modified":"2026-07-16T11:12:58","modified_gmt":"2026-07-16T11:12:58","slug":"creer-couverture","status":"publish","type":"page","link":"https:\/\/printiteasy.eu\/fr\/creer-couverture\/","title":{"rendered":"Omslag maken"},"content":{"rendered":"\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<style>\n.pie-omslag{--navy:#1F3A6E;--pan:#fff;--line:#e2e8f0;--muted:#64748b;color:#0f172a;font-family:Arial,Helvetica,sans-serif}\n.pie-omslag *{box-sizing:border-box}\n.pie-omslag .pieom-head{background:var(--navy);color:#fff;padding:14px 18px;border-radius:12px;margin-bottom:14px}\n.pie-omslag .pieom-head h1{margin:0;font-size:18px;color:#fff}\n.pie-omslag .pieom-head .sub{font-size:12px;color:#c7d2fe;margin-top:4px}\n.pie-omslag .wrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}\n.pie-omslag .panel{background:var(--pan);border:1px solid var(--line);border-radius:12px;padding:16px}\n.pie-omslag .controls{width:340px;flex:0 0 340px}\n.pie-omslag .stage{flex:1;min-width:360px}\n.pie-omslag h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin:0 0 10px}\n.pie-omslag label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}\n.pie-omslag input,.pie-omslag select{width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;background:#fff;color:#0f172a}\n.pie-omslag input[type=color]{height:38px;padding:4px}\n.pie-omslag .row{display:flex;gap:10px}\n.pie-omslag .row>div{flex:1}\n.pie-omslag .readout{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:12px;margin-top:14px;font-size:13px;line-height:1.6}\n.pie-omslag .readout b{color:var(--navy)}\n.pie-omslag .readout .big{font-size:20px;font-weight:bold;color:var(--navy)}\n.pie-omslag canvas{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}\n.pie-omslag .btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}\n.pie-omslag button{border:0;border-radius:8px;padding:11px 16px;font-size:14px;font-weight:bold;cursor:pointer}\n.pie-omslag .primary{background:var(--navy);color:#fff}\n.pie-omslag .note{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}\n.pie-omslag .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}\n.pie-omslag .legend span{display:inline-flex;align-items:center;gap:6px}\n.pie-omslag .sw{width:14px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block}\n.pie-omslag details{margin-top:12px}\n.pie-omslag summary{cursor:pointer;font-size:12px;color:var(--navy)}\n<\/style>\n<div class=\"pie-omslag\">\n<div class=\"pieom-head\"><h1>Omslag-creator \u2014 brutoformaat<\/h1>\n  <div class=\"sub\">Berekent rugdikte + volledig omslagformaat (achterplat \u00b7 rug \u00b7 voorplat \u00b7 afloop \/ plakrand) op basis van de drukspecificaties.<\/div><\/div>\n<div class=\"wrap\">\n  <div class=\"panel controls\">\n    <h2>Boekspecificatie<\/h2>\n    <label>Bindwijze<\/label>\n    <select id=\"bind\">\n      <option value=\"soft\">Softcover (paperback)<\/option>\n      <option value=\"hard\">Hardcover<\/option>\n      <option value=\"saddle\">Geniet (saddle stitch)<\/option>\n    <\/select>\n    <label>Eindformaat (b \u00d7 h)<\/label>\n    <select id=\"fmt\">\n      <option value=\"148x210\">A5 staand \u2014 148 \u00d7 210 mm<\/option>\n      <option value=\"210x297\">A4 staand \u2014 210 \u00d7 297 mm<\/option>\n      <option value=\"210x148\">A5 liggend \u2014 210 \u00d7 148 mm<\/option>\n      <option value=\"297x210\">A4 liggend \u2014 297 \u00d7 210 mm<\/option>\n      <option value=\"148x148\">Vierkant \u2014 148 \u00d7 148 mm<\/option>\n      <option value=\"210x210\">Vierkant \u2014 210 \u00d7 210 mm<\/option>\n      <option value=\"280x280\">Vierkant \u2014 280 \u00d7 280 mm<\/option>\n      <option value=\"170x240\">170 \u00d7 240 mm<\/option>\n      <option value=\"custom\">Aangepast\u2026<\/option>\n    <\/select>\n    <div class=\"row\" id=\"customFmt\" style=\"display:none\">\n      <div><label>Breedte (mm)<\/label><input id=\"cw\" type=\"number\" value=\"155\"><\/div>\n      <div><label>Hoogte (mm)<\/label><input id=\"ch\" type=\"number\" value=\"235\"><\/div>\n    <\/div>\n    <div class=\"row\">\n      <div><label>Aantal pagina&rsquo;s<\/label><input id=\"pages\" type=\"number\" value=\"120\" min=\"2\" step=\"2\"><\/div>\n      <div><label>Papier binnenwerk<\/label><select id=\"paper\"><\/select><\/div>\n    <\/div>\n    <details>\n      <summary>Rugdikte-instellingen (geavanceerd)<\/summary>\n      <div class=\"row\" style=\"align-items:flex-end\">\n        <div><label>Diktefactor<\/label><input id=\"factor\" type=\"number\" step=\"0.01\" value=\"1.34\"><\/div>\n        <div><label>Rug hardcover<\/label><select id=\"hcspine\"><option value=\"recht\">Recht (square)<\/option><option value=\"rond\">Rond (rounded)<\/option><\/select><\/div>\n      <\/div>\n      \n      <div class=\"row\">\n        <div><label>Afloop (mm)<\/label><input id=\"bleed\" type=\"number\" value=\"3\" step=\"0.5\"><\/div>\n        <div><label>Plakrand HC (mm)<\/label><input id=\"turnin\" type=\"number\" value=\"15\" step=\"1\"><\/div>\n      <\/div>\n    <\/details>\n    <h2 style=\"margin-top:18px\">Ontwerp<\/h2>\n    <label>Achtergrondkleur<\/label>\n    <input id=\"bg\" type=\"color\" value=\"#1F3A6E\">\n    <div class=\"row\">\n      <div><label>Voorkant-afbeelding<\/label><input id=\"imgFront\" type=\"file\" accept=\"image\/*\"><\/div>\n      <div><label>Achterkant-afbeelding<\/label><input id=\"imgBack\" type=\"file\" accept=\"image\/*\"><\/div>\n    <\/div>\n    <label>Titel (voorkant)<\/label>\n    <input id=\"title\" type=\"text\" placeholder=\"Titel van je boek\">\n    <label>Auteur (voorkant)<\/label>\n    <input id=\"author\" type=\"text\" placeholder=\"Auteur\">\n    <div class=\"row\">\n      <div><label>Tekstkleur<\/label><input id=\"txtcol\" type=\"color\" value=\"#ffffff\"><\/div>\n      <div><label>Rugtekst<\/label><input id=\"spinetext\" type=\"text\" placeholder=\"Titel \u00b7 Auteur\"><\/div>\n    <\/div>\n    <div class=\"btns\">\n      <button class=\"primary\" id=\"order\" style=\"width:100%\">Gebruik in bestelling \u2192<\/button>\n    <\/div>\n    \n  <\/div>\n  <div class=\"panel stage\">\n    <h2>Voorbeeld op brutoformaat<\/h2>\n    <canvas id=\"cv\" width=\"900\" height=\"500\"><\/canvas>\n    <div class=\"legend\">\n      <span><i class=\"sw\" style=\"border-color:#e11d48\"><\/i> Afloop \/ snijrand<\/span>\n      <span><i class=\"sw\" style=\"border-color:#0ea5e9;border-top-style:dashed\"><\/i> Eindformaat (snijlijn)<\/span>\n      <span><i class=\"sw\" style=\"border-color:#f59e0b\"><\/i> Rug<\/span>\n      <span><i class=\"sw\" style=\"border-color:#10b981;border-top-style:dashed\"><\/i> Plakrand (hardcover)<\/span>\n    <\/div>\n    <div class=\"readout\" id=\"out\"><\/div>\n  <\/div>\n<\/div>\n<script>\nconst PAPERS = [\n  {name:\"80 g\/m\u00b2 Houtvrij Offset\", gram:80, factor:1.34},\n  {name:\"90 g\/m\u00b2 Houtvrij Offset\", gram:90, factor:1.34},\n  {name:\"100 g\/m\u00b2 Houtvrij Offset\", gram:100, factor:1.30},\n  {name:\"120 g\/m\u00b2 Houtvrij Offset\", gram:120, factor:1.30},\n  {name:\"80 g\/m\u00b2 biotop\", gram:80, factor:1.30},\n  {name:\"90 g\/m\u00b2 biotop\", gram:90, factor:1.30},\n  {name:\"120 g\/m\u00b2 biotop\", gram:120, factor:1.30},\n  {name:\"80 g\/m\u00b2 romandruk\", gram:80, factor:1.95},\n  {name:\"90 g\/m\u00b2 romandruk\", gram:90, factor:1.95},\n  {name:\"70 g\/m\u00b2 mc silk\", gram:70, factor:0.96},\n  {name:\"90 g\/m\u00b2 mc silk\", gram:90, factor:0.96},\n  {name:\"100 g\/m\u00b2 mc silk\", gram:100, factor:0.96},\n  {name:\"115 g\/m\u00b2 mc silk\", gram:115, factor:0.96},\n  {name:\"130 g\/m\u00b2 mc silk\", gram:130, factor:0.96},\n  {name:\"150 g\/m\u00b2 mc silk\", gram:150, factor:1.00},\n  {name:\"90 g\/m\u00b2 MC Gloss\", gram:90, factor:0.81},\n  {name:\"115 g\/m\u00b2 MC Gloss\", gram:115, factor:0.79},\n  {name:\"130 g\/m\u00b2 MC Gloss\", gram:130, factor:0.80},\n  {name:\"150 g\/m\u00b2 MC Gloss\", gram:150, factor:0.81},\n  {name:\"170 g\/m\u00b2 MC Gloss\", gram:170, factor:0.82},\n  {name:\"170 g\/m\u00b2 mc silk\", gram:170, factor:0.93},\n];\nconst $ = id => document.getElementById(id);\nconst paperSel = $('paper');\nPAPERS.forEach((p,i)=>{const o=document.createElement('option');o.value=i;o.textContent=p.name;paperSel.appendChild(o);});\nlet frontImg=null, backImg=null;\nfunction loadImg(input,set){ input.addEventListener('change',e=>{const f=e.target.files[0]; if(!f)return; const img=new Image(); img.onload=()=>{set(img);draw();}; img.src=URL.createObjectURL(f);});}\nloadImg($('imgFront'), i=>frontImg=i);\nloadImg($('imgBack'), i=>backImg=i);\n$('fmt').addEventListener('change',()=>{ $('customFmt').style.display = $('fmt').value==='custom'?'flex':'none'; draw();});\n$('paper').addEventListener('change',()=>{ $('factor').value = PAPERS[$('paper').value].factor; draw();});\n['bind','pages','factor','bleed','turnin','hcspine','bg','title','author','txtcol','spinetext','cw','ch'].forEach(id=>$(id).addEventListener('input',draw));\n$('hcspine').addEventListener('change',draw);\nfunction dims(){\n  const bind=$('bind').value;\n  let tw,th;\n  if($('fmt').value==='custom'){ tw=+$('cw').value; th=+$('ch').value; }\n  else { const parts=$('fmt').value.split('x').map(Number); tw=parts[0]; th=parts[1]; }\n  const pages=Math.max(2,+$('pages').value||2);\n  const gram=PAPERS[$('paper').value].gram;\n  const factor=+$('factor').value||1.34;\n  let spine = pages*gram*factor\/2000;\n  const bleed=+$('bleed').value||3;\n  const turnin=+$('turnin').value||15;\n  const boardThickness=2.25;\n  let margin=bleed, spineShown=spine, saddle=false, jointExtra=0, platExtraH=0;\n  if(bind==='hard'){ margin=18; jointExtra=8; platExtraH=6; const rounded=($('hcspine')&&$('hcspine').value==='rond'); spineShown = rounded ? (spine+2*boardThickness)\/0.91 : (spine+2*boardThickness); }\n  if(bind==='saddle'){ spineShown=0; saddle=true; }\n  const totalW = 2*tw + jointExtra + spineShown + 2*margin;\n  const totalH = th + platExtraH + 2*margin;\n  return {bind,tw,th,pages,gram,factor,spine,spineShown,bleed,turnin,margin,jointExtra,platExtraH,totalW,totalH,saddle};\n}\nfunction draw(){\n  const d=dims();\n  const cv=$('cv'), ctx=cv.getContext('2d');\n  const maxW=880, maxH=520;\n  const scale=Math.min(maxW\/d.totalW, maxH\/d.totalH);\n  cv.width=Math.round(d.totalW*scale); cv.height=Math.round(d.totalH*scale);\n  const S=v=>v*scale;\n  ctx.clearRect(0,0,cv.width,cv.height);\n  ctx.fillStyle=$('bg').value; ctx.fillRect(0,0,cv.width,cv.height);\n  const m=d.margin;\n  const je=d.jointExtra||0, sStrip=d.spineShown+je, platH=d.th+(d.platExtraH||0);\n  const backX=m, spineX=m+d.tw, frontX=m+d.tw+sStrip;\n  function cover(img,x,y,w,h){ if(!img)return; const ir=img.width\/img.height, r=w\/h; let sw,sh,sx,sy; if(ir>r){sh=img.height;sw=sh*r;sx=(img.width-sw)\/2;sy=0;}else{sw=img.width;sh=sw\/r;sx=0;sy=(img.height-sh)\/2;} ctx.drawImage(img,sx,sy,sw,sh,S(x),S(y),S(w),S(h)); }\n  cover(backImg, backX, m, d.tw, platH);\n  cover(frontImg, frontX, m, d.tw, platH);\n  if(!d.saddle && sStrip>0){ ctx.fillStyle='rgba(0,0,0,.12)'; ctx.fillRect(S(spineX),S(m),S(sStrip),S(platH)); }\n  const tc=$('txtcol').value;\n  ctx.fillStyle=tc; ctx.textAlign='center';\n  const cx=S(frontX+d.tw\/2);\n  if($('title').value){ ctx.font='bold '+S(d.th*0.06)+'px Arial'; ctx.fillText($('title').value, cx, S(m+platH*0.30), S(d.tw*0.9)); }\n  if($('author').value){ ctx.font=S(d.th*0.035)+'px Arial'; ctx.fillText($('author').value, cx, S(m+platH*0.85), S(d.tw*0.9)); }\n  const st=$('spinetext').value||$('title').value;\n  if(!d.saddle && d.spineShown>=7 && st){ ctx.save(); ctx.translate(S(spineX+sStrip\/2), S(m+platH\/2)); ctx.rotate(-Math.PI\/2); ctx.fillStyle=tc; ctx.font='bold '+S(Math.min(d.spineShown*0.5,4.5))+'px Arial'; ctx.textAlign='center'; ctx.fillText(st,0,S(d.spineShown*0.18)); ctx.restore(); }\n  ctx.lineWidth=1;\n  ctx.strokeStyle='#e11d48'; ctx.strokeRect(0.5,0.5,cv.width-1,cv.height-1);\n  ctx.strokeStyle='#0ea5e9'; ctx.setLineDash([6,4]);\n  ctx.strokeRect(S(m),S(m),S(2*d.tw+sStrip),S(platH));\n  ctx.setLineDash([]);\n  if(!d.saddle && sStrip>0){ ctx.strokeStyle='#f59e0b'; ctx.beginPath(); ctx.moveTo(S(spineX),S(m)); ctx.lineTo(S(spineX),S(m+platH)); ctx.moveTo(S(frontX),S(m)); ctx.lineTo(S(frontX),S(m+platH)); ctx.stroke(); }\n  if(d.bind==='hard'){ ctx.strokeStyle='#10b981'; ctx.setLineDash([4,4]); ctx.strokeRect(S(d.margin),S(d.margin),cv.width-S(2*d.margin),cv.height-S(2*d.margin)); ctx.setLineDash([]); }\n  $('out').innerHTML =\n    '<div class=\"big\">Rugdikte: '+d.spineShown.toFixed(2)+' mm'+(d.bind==='hard'?' <span style=\"font-size:12px;font-weight:normal\">(band, incl. 2\u00d7 karton)<\/span>':'')+'<\/div>'+\n    'Brutoformaat omslag: <b>'+d.totalW.toFixed(1)+' \u00d7 '+d.totalH.toFixed(1)+' mm<\/b><br>'+\n    'Eindformaat (per plat): '+d.tw+' \u00d7 '+d.th+' mm &nbsp;\u00b7&nbsp; '+(d.saddle?'geniet (geen rug)':'boekblok-rug '+d.spine.toFixed(2)+' mm')+'<br>'+\n    (d.bind==='hard'?'Plakrand (turn-in): '+d.margin+' mm rondom':'Afloop: '+d.bleed+' mm rondom')+\n    ' &nbsp;\u00b7&nbsp; '+d.pages+' pag \u00b7 '+d.gram+' g\/m\u00b2 \u00b7 factor '+d.factor;\n}\nfunction buildCoverPdf(){\n  const d=dims();\n  const { jsPDF } = window.jspdf;\n  const pdf=new jsPDF({unit:'mm',format:[d.totalW,d.totalH],orientation:d.totalW>=d.totalH?'landscape':'portrait'});\n  const je=d.jointExtra||0, sStrip=d.spineShown+je, platH=d.th+(d.platExtraH||0);\n  const m=d.margin, backX=m, spineX=m+d.tw, frontX=m+d.tw+sStrip;\n  const bg=$('bg').value; pdf.setFillColor(bg); pdf.rect(0,0,d.totalW,d.totalH,'F');\n  function addCover(img,x,w){ if(!img)return; const c=document.createElement('canvas'); const r=w\/platH; let sw,sh,sx,sy; if(img.width\/img.height>r){sh=img.height;sw=sh*r;sx=(img.width-sw)\/2;sy=0;}else{sw=img.width;sh=sw\/r;sx=0;sy=(img.height-sh)\/2;} c.width=sw;c.height=sh; c.getContext('2d').drawImage(img,sx,sy,sw,sh,0,0,sw,sh); pdf.addImage(c.toDataURL('image\/jpeg',0.92),'JPEG',x,m,w,platH); }\n  addCover(backImg, backX, d.tw);\n  addCover(frontImg, frontX, d.tw);\n  const tc=$('txtcol').value; pdf.setTextColor(tc);\n  if($('title').value){ pdf.setFont('helvetica','bold'); pdf.setFontSize(d.th*0.06*2.83); pdf.text($('title').value, frontX+d.tw\/2, m+platH*0.30, {align:'center',maxWidth:d.tw*0.9}); }\n  if($('author').value){ pdf.setFont('helvetica','normal'); pdf.setFontSize(d.th*0.035*2.83); pdf.text($('author').value, frontX+d.tw\/2, m+platH*0.85, {align:'center',maxWidth:d.tw*0.9}); }\n  const st=$('spinetext').value||$('title').value;\n  if(!d.saddle && d.spineShown>=7 && st){ pdf.setFont('helvetica','bold'); pdf.setFontSize(Math.min(d.spineShown*0.5,4.5)*2.83); pdf.text(st, spineX+sStrip*0.5, m+platH\/2, {align:'center',angle:90}); }\n  return pdf;\n}\n$('order').addEventListener('click',()=>alert('In fase 3 gaat deze knop de gemaakte omslag automatisch in je bestelling zetten. In dit prototype is dat nog niet gekoppeld.'));\n$('factor').value=PAPERS[0].factor;\ndraw();\n<\/script>\n<\/div>\n\n\n\n<script>\n(function(){\nfunction _pdb(){return new Promise(function(res,rej){var r=indexedDB.open('pie_db',1);r.onupgradeneeded=function(){r.result.createObjectStore('kv');};r.onsuccess=function(){res(r.result);};r.onerror=function(){rej(r.error);};});}\nfunction _pput(k,v){return _pdb().then(function(db){return new Promise(function(res,rej){var t=db.transaction('kv','readwrite');t.objectStore('kv').put(v,k);t.oncomplete=function(){res();};t.onerror=function(){rej(t.error);};});});}\nfunction ov(){\n  var b=document.getElementById('order'); if(!b||b.dataset.piebound) return; b.dataset.piebound='1';\n  var nb=b.cloneNode(true); b.parentNode.replaceChild(nb,b);\n  nb.textContent='Gebruik in bestelling \\u2192';\n  nb.addEventListener('click',function(){\n    var go=function(){ location.href='\/boek-maken\/'; };\n    try{ if(typeof buildCoverPdf==='function'){ var blob=buildCoverPdf().output('blob'); _pput('pie_pending_cover',blob).then(function(){localStorage.setItem('pie_pending_cover','1');go();},go); return; } }catch(e){}\n    go();\n  });\n}\nvar t=0,iv=setInterval(function(){ if(document.getElementById('order')||t++>60){clearInterval(iv);ov();} },200);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Omslag-creator \u2014 brutoformaat Berekent rugdikte + volledig omslagformaat (achterplat \u00b7 rug \u00b7 voorplat \u00b7 afloop \/ plakrand) op basis van de drukspecificaties. Boekspecificatie Bindwijze Softcover (paperback)HardcoverGeniet (saddle stitch) Eindformaat (b \u00d7 h) A5 staand \u2014 148 \u00d7 210 mmA4 staand \u2014 210 \u00d7 297 mmA5 liggend \u2014 210 \u00d7 148 mmA4 liggend \u2014 297 \u00d7&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-1203","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/pages\/1203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/comments?post=1203"}],"version-history":[{"count":2,"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/pages\/1203\/revisions"}],"predecessor-version":[{"id":1217,"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/pages\/1203\/revisions\/1217"}],"wp:attachment":[{"href":"https:\/\/printiteasy.eu\/fr\/wp-json\/wp\/v2\/media?parent=1203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}