{"id":681206,"date":"2025-01-15T21:29:28","date_gmt":"2025-01-15T20:29:28","guid":{"rendered":"https:\/\/www.hoog.design\/?page_id=681206"},"modified":"2026-05-21T16:48:42","modified_gmt":"2026-05-21T14:48:42","slug":"afbeeldingen-verkleinen","status":"publish","type":"page","link":"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen","title":{"rendered":"Afbeeldingen verkleinen"},"content":{"rendered":"\r\n<div id=\"image-resizer\">\r\n<h1>Batch Afbeelding Verkleiner<\/h1>\r\n<div id=\"uploadArea\" class=\"upload-area\">\r\n<p>Sleep je afbeeldingen hierheen, of <label style=\"color: #007bff; cursor: pointer;\">klik om te uploaden<\/label>.<\/p>\r\n<input id=\"fileInput\" style=\"display: none;\" accept=\"image\/*\" multiple=\"multiple\" type=\"file\" \/><\/div>\r\n<div id=\"preview\" class=\"preview\">\u00a0<\/div>\r\n<button id=\"downloadBtn\" style=\"display: none;\">Download Resized Images (ZIP)<\/button> <canvas id=\"canvas\" style=\"display: none;\"><\/canvas><\/div>\r\n<p><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script> <script>\r\n    const uploadArea = document.getElementById('uploadArea');\r\n    const fileInput = document.getElementById('fileInput');\r\n    const preview = document.getElementById('preview');\r\n    const downloadBtn = document.getElementById('downloadBtn');\r\n    const canvas = document.getElementById('canvas');\r\n    const ctx = canvas.getContext('2d');\r\n    const maxSize = 1920;\r\n    const zip = new JSZip();\r\n\r\n    \/\/ Drag-and-drop handlers\r\n    uploadArea.addEventListener('dragover', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        uploadArea.classList.add('dragover');\r\n    });\r\n\r\n    uploadArea.addEventListener('dragleave', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        uploadArea.classList.remove('dragover');\r\n    });\r\n\r\n    uploadArea.addEventListener('drop', (e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        uploadArea.classList.remove('dragover');\r\n        handleFiles(e.dataTransfer.files);\r\n    });\r\n\r\n    uploadArea.addEventListener('click', () => fileInput.click());\r\n    fileInput.addEventListener('change', () => handleFiles(fileInput.files));\r\n\r\n    \/\/ Handle uploaded files\r\n    async function handleFiles(files) {\r\n        preview.innerHTML = '';\r\n        const fileArray = Array.from(files);\r\n        const promises = fileArray.map(file => {\r\n            if (!file.type.startsWith('image\/')) return Promise.resolve(); \/\/ Skip non-images\r\n\r\n            const img = new Image();\r\n            const reader = new FileReader();\r\n\r\n            return new Promise((resolve) => {\r\n                reader.onload = (e) => {\r\n                    img.src = e.target.result;\r\n                    preview.appendChild(createPreview(img.src, file.name));\r\n                    img.onload = () => {\r\n                        resizeAndAddToZip(img, file.name).then(resolve);\r\n                    };\r\n                };\r\n                reader.readAsDataURL(file);\r\n            });\r\n        });\r\n\r\n        await Promise.all(promises);\r\n        downloadBtn.style.display = 'block';\r\n    }\r\n\r\n    \/\/ Create preview element\r\n    function createPreview(src, name) {\r\n        const img = document.createElement('img');\r\n        img.src = src;\r\n        img.alt = name;\r\n        return img;\r\n    }\r\n\r\n    \/\/ Resize and add image to ZIP\r\n    function resizeAndAddToZip(img, fileName) {\r\n        return new Promise((resolve) => {\r\n            let width = img.width;\r\n            let height = img.height;\r\n\r\n            if (width > height && width > maxSize) {\r\n                height = (maxSize \/ width) * height;\r\n                width = maxSize;\r\n            } else if (height > maxSize) {\r\n                width = (maxSize \/ height) * width;\r\n                height = maxSize;\r\n            }\r\n\r\n            canvas.width = width;\r\n            canvas.height = height;\r\n            ctx.drawImage(img, 0, 0, width, height);\r\n\r\n            const dataUrl = canvas.toDataURL('image\/jpeg', 0.9); \/\/ Adjust quality if needed\r\n            const base64 = dataUrl.split(',')[1]; \/\/ Strip metadata for ZIP\r\n            zip.file(fileName.replace(\/\\.\\w+$\/, '.jpg'), base64, { base64: true });\r\n            resolve(); \/\/ Notify that the image has been processed\r\n        });\r\n    }\r\n\r\n    \/\/ Download ZIP\r\n    downloadBtn.addEventListener('click', async () => {\r\n        const content = await zip.generateAsync({ type: 'blob' });\r\n        const link = document.createElement('a');\r\n        link.href = URL.createObjectURL(content);\r\n        link.download = 'resized-images.zip';\r\n        link.click();\r\n    });\r\n<\/script> <style>\r\n    #image-resizer {\r\n        font-family: Arial, sans-serif;\r\n        margin: 0 auto;\r\n        max-width: 600px;\r\n        text-align: center;\r\n        background-color: #f4f4f9;\r\n        padding: 20px;\r\n        border-radius: 10px;\r\n        border: 1px solid #ddd;\r\n        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\r\n    }\r\n    h1 {\r\n        color: #333;\r\n        margin-top: 50px;\r\n    }\r\n    .hero {\r\n      display: none;\r\n    }\r\n    .upload-area {\r\n        border: 2px dashed #666;\r\n        border-radius: 10px;\r\n        padding: 20px;\r\n        text-align: center;\r\n        background-color: white;\r\n        transition: background-color 0.3s, border-color 0.3s;\r\n    }\r\n    .upload-area.dragover {\r\n        border-color: #007bff;\r\n        background-color: #e9f7ff;\r\n    }\r\n    #fileInput {\r\n        display: none;\r\n    }\r\n    .preview {\r\n        margin-top: 10px;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        justify-content: center;\r\n    }\r\n    .preview img {\r\n        width: 100px;\r\n        height: auto;\r\n        border: 1px solid #ddd;\r\n        border-radius: 5px;\r\n    }\r\n    button {\r\n        margin-top: 15px;\r\n        padding: 10px 20px;\r\n        font-size: 16px;\r\n        border: none;\r\n        border-radius: 5px;\r\n        background-color: #007bff;\r\n        color: white;\r\n        cursor: pointer;\r\n    }\r\n    button:hover {\r\n        background-color: #0056b3;\r\n    }\r\n<\/style><\/p>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Batch Afbeelding Verkleiner Sleep je afbeeldingen hierheen, of klik om te uploaden. \u00a0 Download Resized Images (ZIP) &nbsp;<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_linkdex":"","_yoast_wpseo_content_score":"90","content-type":"","footnotes":"","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_keywordsynonyms":"[\"\"]","_yoast_wpseo_primary_category":null,"_yoast_wpseo_estimated-reading-time-minutes":"1"},"class_list":["post-681206","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Afbeeldingen verkleinen | Hoog Design<\/title>\n<meta name=\"description\" content=\"Afbeeldingen verkleinen - HOOG.design - Exclusive living inspiration\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/pages\/681206\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Afbeeldingen verkleinen\" \/>\n<meta property=\"og:description\" content=\"Afbeeldingen verkleinen - HOOG.design - Exclusive living inspiration\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen\" \/>\n<meta property=\"og:site_name\" content=\"HOOG.design - Exclusive living inspiration\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/HOOG.design.inspiratieplatform\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-21T14:48:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@HOOG_DESIGN\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/afbeeldingen-verkleinen\",\"url\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/afbeeldingen-verkleinen\",\"name\":\"Afbeeldingen verkleinen | Hoog Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/#website\"},\"datePublished\":\"2025-01-15T20:29:28+00:00\",\"dateModified\":\"2026-05-21T14:48:42+00:00\",\"description\":\"Afbeeldingen verkleinen - HOOG.design - Exclusive living inspiration\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/afbeeldingen-verkleinen#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hoog.design\\\/nl\\\/afbeeldingen-verkleinen\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/afbeeldingen-verkleinen#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hoog.design\\\/nl\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Afbeeldingen verkleinen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/\",\"name\":\"HOOG.design - Exclusive living inspiration\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/#organization\",\"name\":\"HOOG.design\",\"url\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.hoog.design\\\/2023\\\/01\\\/10120306\\\/hoog-design-logo-ff3333.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.hoog.design\\\/2023\\\/01\\\/10120306\\\/hoog-design-logo-ff3333.jpg\",\"width\":560,\"height\":560,\"caption\":\"HOOG.design\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/HOOG.design.inspiratieplatform\\\/\",\"https:\\\/\\\/x.com\\\/HOOG_DESIGN\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Afbeeldingen verkleinen | Hoog Design","description":"Afbeeldingen verkleinen - HOOG.design - Exclusive living inspiration","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:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/pages\/681206","og_locale":"nl_NL","og_type":"article","og_title":"Afbeeldingen verkleinen","og_description":"Afbeeldingen verkleinen - HOOG.design - Exclusive living inspiration","og_url":"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen","og_site_name":"HOOG.design - Exclusive living inspiration","article_publisher":"https:\/\/www.facebook.com\/HOOG.design.inspiratieplatform\/","article_modified_time":"2026-05-21T14:48:42+00:00","twitter_card":"summary_large_image","twitter_site":"@HOOG_DESIGN","twitter_misc":{"Geschatte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen","url":"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen","name":"Afbeeldingen verkleinen | Hoog Design","isPartOf":{"@id":"https:\/\/www.hoog.design\/nl\/#website"},"datePublished":"2025-01-15T20:29:28+00:00","dateModified":"2026-05-21T14:48:42+00:00","description":"Afbeeldingen verkleinen - HOOG.design - Exclusive living inspiration","breadcrumb":{"@id":"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hoog.design\/nl\/afbeeldingen-verkleinen#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hoog.design\/nl"},{"@type":"ListItem","position":2,"name":"Afbeeldingen verkleinen"}]},{"@type":"WebSite","@id":"https:\/\/www.hoog.design\/nl\/#website","url":"https:\/\/www.hoog.design\/nl\/","name":"HOOG.design - Exclusive living inspiration","description":"","publisher":{"@id":"https:\/\/www.hoog.design\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hoog.design\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.hoog.design\/nl\/#organization","name":"HOOG.design","url":"https:\/\/www.hoog.design\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hoog.design\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.hoog.design\/2023\/01\/10120306\/hoog-design-logo-ff3333.jpg","contentUrl":"https:\/\/cdn.hoog.design\/2023\/01\/10120306\/hoog-design-logo-ff3333.jpg","width":560,"height":560,"caption":"HOOG.design"},"image":{"@id":"https:\/\/www.hoog.design\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HOOG.design.inspiratieplatform\/","https:\/\/x.com\/HOOG_DESIGN"]}]}},"trid":7822262,"is_original":true,"_links":{"self":[{"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/pages\/681206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/comments?post=681206"}],"version-history":[{"count":11,"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/pages\/681206\/revisions"}],"predecessor-version":[{"id":803015,"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/pages\/681206\/revisions\/803015"}],"wp:attachment":[{"href":"https:\/\/www.hoog.design\/nl\/wp-json\/wp\/v2\/media?parent=681206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}