{"id":4885,"date":"2026-02-01T04:18:15","date_gmt":"2026-02-01T04:18:15","guid":{"rendered":"https:\/\/steentijdvondsten.nl\/post\/?page_id=4885"},"modified":"2026-03-11T15:27:46","modified_gmt":"2026-03-11T15:27:46","slug":"interactief-canvas","status":"publish","type":"page","link":"https:\/\/steentijdvondsten.nl\/post\/index.php\/interactief-canvas\/","title":{"rendered":"Fotobijwerken voor archeologische schaalweergave"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"595\" height=\"279\" src=\"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/01\/afbeelding_met_linialen1.png\" alt=\"\" class=\"wp-image-4695 size-full\" srcset=\"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/01\/afbeelding_met_linialen1.png 595w, https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/01\/afbeelding_met_linialen1-300x141.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Met deze online fotobewerker kun je een afbeelding selecteren bijsnijden en op schaal weergeven, waarbij de afmetingen van de afbeelding worden getoond in millimeters. Zodat je de afbeelding met liniaal kan opslaan voor gebruik. Daarnaast kun je de hulplijnen plaatsen en verplaatsen om specifieke snij punten van de afbeelding te markeren.<\/p>\n<\/div><\/div>\n\n\n    <h2><\/h2>\n\n    <div class=\"container\">\n        <canvas id=\"rulerTop\" width=\"740\" height=\"40\"><\/canvas>\n        <canvas id=\"rulerLeft\" width=\"40\" height=\"740\"><\/canvas>\n        <canvas id=\"canvas\" width=\"740\" height=\"740\"><\/canvas>\n        <canvas id=\"guideCanvas\" width=\"740\" height=\"740\"><\/canvas>\n    <\/div>\n\n    <div class=\"controls\">\n        <button id=\"uploadBtn\">Upload Afbeelding<\/button>\n        <button id=\"cropBtn\">Bijsnijden<\/button>\n        <button id=\"downloadBtn\">Download Afbeelding<\/button>\n        <input type=\"file\" id=\"upload\" accept=\"image\/*\"><br><br>\n\n        <label>Breedte (mm): <input type=\"number\" id=\"widthMM\" step=\"0.1\"><\/label>\n        <label>Hoogte (mm): <input type=\"number\" id=\"heightMM\" step=\"0.1\"><\/label>\n        <label>Naam: <input type=\"text\" id=\"fileName\" placeholder=\"H107\"><\/label>\n\n        <div id=\"instruction\" class=\"instruction\">\n            Met een iPad of tablet is het niet mogelijk om een naam op te geven. Dit dient u zelf te doen in de bestandsmap.\n        <\/div>\n    <\/div>\n\n    <script>\n        if(typeof initFotoLinialen === \"function\") initFotoLinialen();\n    <\/script>\n    \n\n\n\n<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Privacy info popup<\/title>\n\n<style>\n\/* Container met maximale breedte *\/\n.privacyInfo__container {\n    max-width: 20cm;          \/* maximaal 20 cm *\/\n    display: flex;\n    align-items: center;\n    gap: 8px;                 \/* ruimte tussen tekst en rondje *\/\n    position: relative;\n}\n\n\/* Tekst *\/\n.privacyInfo__text {\n    font-size: 14px;\n    line-height: 1.4;\n}\n\n\/* Info-icoon *\/\n.privacyInfo__icon {\n    width: 22px;\n    height: 22px;\n    min-width: 22px;\n    border-radius: 50%;\n    background-color: #cc6a00; \/* donker oranje *\/\n    color: #ffffff;\n    text-align: center;\n    line-height: 22px;\n    font-weight: bold;\n    cursor: pointer;\n    user-select: none;\n    font-size: 14px;\n    position: relative;\n}\n\n\/* Popup *\/\n.privacyInfo__popup {\n    position: absolute;\n    bottom: 130%;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: #2e2e2e;\n    color: #ffffff;\n    padding: 10px 12px;\n    border-radius: 6px;\n    width: 260px;\n    font-size: 13px;\n    line-height: 1.4;\n    display: none;\n    box-sizing: border-box;\n    z-index: 1000;\n}\n\n\/* Pijltje *\/\n.privacyInfo__popup::after {\n    content: \"\";\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 6px;\n    border-style: solid;\n    border-color: #2e2e2e transparent transparent transparent;\n}\n\n\/* Zichtbaar *\/\n.privacyInfo__icon.privacyInfo__show .privacyInfo__popup {\n    display: block;\n}\n<\/style>\n<\/head>\n<body>\n\n\n\n<!-- PLAATS DIT BLOK WAAR JE HET WILT -->\n<div class=\"privacyInfo__container\" data-privacy-info>\n    <div class=\"privacyInfo__text\">\n        Je kunt een afbeelding schalen of bijsnijden tot maximaal 20 cm.\n    <\/div>\n\n    <div class=\"privacyInfo__icon\">\n        i\n        <div class=\"privacyInfo__popup\">\n            Wij slaan geen afbeeldingen op en bewaren deze niet.\n            \n            Je privacy is gewaarborgd.\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function () {\n    'use strict';\n\n    var containers = document.querySelectorAll('[data-privacy-info]');\n\n    function positionPopup(icon) {\n        var popup = icon.querySelector('.privacyInfo__popup');\n\n        popup.style.left = '50%';\n        popup.style.right = 'auto';\n        popup.style.transform = 'translateX(-50%)';\n\n        var rect = popup.getBoundingClientRect();\n        var margin = 10;\n\n        if (rect.left < margin) {\n            popup.style.left = '0';\n            popup.style.transform = 'translateX(0)';\n        }\n\n        if (rect.right > window.innerWidth - margin) {\n            popup.style.left = 'auto';\n            popup.style.right = '0';\n            popup.style.transform = 'translateX(0)';\n        }\n    }\n\n    containers.forEach(function (container) {\n        var icon = container.querySelector('.privacyInfo__icon');\n\n        function show() {\n            icon.classList.add('privacyInfo__show');\n            positionPopup(icon);\n        }\n\n        function hide() {\n            icon.classList.remove('privacyInfo__show');\n        }\n\n        \/\/ Desktop\n        icon.addEventListener('mouseenter', show);\n        icon.addEventListener('mouseleave', hide);\n\n        \/\/ Touch\n        icon.addEventListener('click', function (e) {\n            e.stopPropagation();\n            icon.classList.toggle('privacyInfo__show');\n            if (icon.classList.contains('privacyInfo__show')) {\n                positionPopup(icon);\n            }\n        });\n    });\n\n    document.addEventListener('click', function () {\n        containers.forEach(function (container) {\n            var icon = container.querySelector('.privacyInfo__icon');\n            icon.classList.remove('privacyInfo__show');\n        });\n    });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p>Tip: Maak een foto van het artefact met een witte achtergrond voor een strak en professioneel resultaat.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:25% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"892\" src=\"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/03\/Voorbeeld_pdf_pagina_opmaak.png\" alt=\"\" class=\"wp-image-7485 size-full\" srcset=\"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/03\/Voorbeeld_pdf_pagina_opmaak.png 637w, https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/03\/Voorbeeld_pdf_pagina_opmaak-214x300.png 214w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Wil je afbeeldingen gebruiken in een magazine of ontwerp, zoals bij een <strong>artikelpagina<\/strong> of <strong>redactionele layout<\/strong>? Dan kun je gebruikmaken van deze paginaopmaak in PDF-formaat. Deze opmaak laat zien hoe tekst en afbeeldingen overzichtelijk en aantrekkelijk samen op \u00e9\u00e9n pagina kunnen worden geplaatst, zoals in een tijdschriftartikel.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n    <div id=\"toolbar\">\n        <button id=\"addText\">Tekstblok Plaatsen<\/button>\n        <button id=\"addImage\">Upload Afbeelding<\/button>\n        <button id=\"removeLast\">Verwijder Laatste<\/button>\n        <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" style=\"display:none;\">\n\n        <label for=\"fontSizeRange\">Lettergrootte:<\/label>\n        <input type=\"range\" id=\"fontSizeRange\" min=\"8\" max=\"36\" value=\"14\">\n        <span id=\"fontSizePercent\">100%<\/span>\n\n        <button id=\"downloadPDF\">Download als PDF<\/button>\n    <\/div>\n\n    <div id=\"a4page\"><\/div>\n    \n\n\n\n<p><sub><sub>\u00a9 Deze plugins zijn ontwikkeld door Steentijdvondsten.nl.<\/sub><\/sub><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Met deze online fotobewerker kun je een afbeelding selecteren bijsnijden en op schaal weergeven, waarbij de afmetingen van de afbeelding worden getoond in millimeters. Zodat je de afbeelding met liniaal kan opslaan voor gebruik. Daarnaast kun je de hulplijnen plaatsen en verplaatsen om specifieke snij punten van de afbeelding te markeren. Privacy info popup Je kunt een afbeelding schalen of bijsnijden tot maximaal 20 cm. i Wij slaan geen afbeeldingen op en bewaren deze niet. Je privacy is gewaarborgd. Tip: Maak een foto van het artefact met een witte achtergrond voor een strak en professioneel resultaat. Wil je afbeeldingen gebruiken in een magazine of ontwerp, zoals bij een artikelpagina of redactionele layout? Dan kun je gebruikmaken van deze paginaopmaak in PDF-formaat. Deze opmaak laat zien hoe tekst en afbeeldingen overzichtelijk en aantrekkelijk samen op \u00e9\u00e9n pagina kunnen worden geplaatst, zoals in een tijdschriftartikel. \u00a9 Deze plugins zijn ontwikkeld door Steentijdvondsten.nl.<\/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-4885","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/4885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/comments?post=4885"}],"version-history":[{"count":73,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/4885\/revisions"}],"predecessor-version":[{"id":7698,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/4885\/revisions\/7698"}],"wp:attachment":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/media?parent=4885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}