{"id":780541,"date":"2025-01-15T21:29:28","date_gmt":"2025-01-15T20:29:28","guid":{"rendered":"https:\/\/www.hoog.design\/redimensionner-les-images"},"modified":"2026-05-21T17:02:28","modified_gmt":"2026-05-21T15:02:28","slug":"bilder-skalieren","status":"publish","type":"page","link":"https:\/\/www.hoog.design\/de\/bilder-skalieren","title":{"rendered":"Bilder skalieren"},"content":{"rendered":"\r\n<div id=\"image-resizer\">\r\n<h1>Stapel-Bildgr\u00f6\u00dfen\u00e4nderer<\/h1>\r\n<div id=\"uploadArea\" class=\"upload-area\">\r\n<p>Ziehen Sie Ihre Bilder hierher oder <label style=\"color: #007bff; cursor: pointer;\">klicken Sie zum Hochladen<\/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>Stapel-Bildgr\u00f6\u00dfen\u00e4nderer Ziehen Sie Ihre Bilder hierher oder klicken Sie zum Hochladen . \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-780541","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>Bilder skalieren | Hoog Design<\/title>\n<meta name=\"description\" content=\"Bilder skalieren - 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\/de\/wp-json\/wp\/v2\/pages\/780541\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bilder skalieren\" \/>\n<meta property=\"og:description\" content=\"Bilder skalieren - HOOG.design - Exclusive living inspiration\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hoog.design\/de\/bilder-skalieren\" \/>\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-21T15:02:28+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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de\\\/bilder-skalieren\",\"url\":\"https:\\\/\\\/www.hoog.design\\\/de\\\/bilder-skalieren\",\"name\":\"Bilder skalieren | Hoog Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de#website\"},\"datePublished\":\"2025-01-15T20:29:28+00:00\",\"dateModified\":\"2026-05-21T15:02:28+00:00\",\"description\":\"Bilder skalieren - HOOG.design - Exclusive living inspiration\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de\\\/bilder-skalieren#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hoog.design\\\/de\\\/bilder-skalieren\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de\\\/bilder-skalieren#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hoog.design\\\/de\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bilder skalieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de#website\",\"url\":\"https:\\\/\\\/www.hoog.design\\\/de\",\"name\":\"HOOG.design - Exclusive living inspiration\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hoog.design\\\/de?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de#organization\",\"name\":\"HOOG.design\",\"url\":\"https:\\\/\\\/www.hoog.design\\\/de\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.hoog.design\\\/de#\\\/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\\\/de#\\\/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":"Bilder skalieren | Hoog Design","description":"Bilder skalieren - 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\/de\/wp-json\/wp\/v2\/pages\/780541","og_locale":"de_DE","og_type":"article","og_title":"Bilder skalieren","og_description":"Bilder skalieren - HOOG.design - Exclusive living inspiration","og_url":"https:\/\/www.hoog.design\/de\/bilder-skalieren","og_site_name":"HOOG.design - Exclusive living inspiration","article_publisher":"https:\/\/www.facebook.com\/HOOG.design.inspiratieplatform\/","article_modified_time":"2026-05-21T15:02:28+00:00","twitter_card":"summary_large_image","twitter_site":"@HOOG_DESIGN","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hoog.design\/de\/bilder-skalieren","url":"https:\/\/www.hoog.design\/de\/bilder-skalieren","name":"Bilder skalieren | Hoog Design","isPartOf":{"@id":"https:\/\/www.hoog.design\/de#website"},"datePublished":"2025-01-15T20:29:28+00:00","dateModified":"2026-05-21T15:02:28+00:00","description":"Bilder skalieren - HOOG.design - Exclusive living inspiration","breadcrumb":{"@id":"https:\/\/www.hoog.design\/de\/bilder-skalieren#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hoog.design\/de\/bilder-skalieren"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hoog.design\/de\/bilder-skalieren#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hoog.design\/de"},{"@type":"ListItem","position":2,"name":"Bilder skalieren"}]},{"@type":"WebSite","@id":"https:\/\/www.hoog.design\/de#website","url":"https:\/\/www.hoog.design\/de","name":"HOOG.design - Exclusive living inspiration","description":"","publisher":{"@id":"https:\/\/www.hoog.design\/de#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hoog.design\/de?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.hoog.design\/de#organization","name":"HOOG.design","url":"https:\/\/www.hoog.design\/de","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.hoog.design\/de#\/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\/de#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HOOG.design.inspiratieplatform\/","https:\/\/x.com\/HOOG_DESIGN"]}]}},"trid":7822262,"is_original":false,"_links":{"self":[{"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/pages\/780541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/comments?post=780541"}],"version-history":[{"count":3,"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/pages\/780541\/revisions"}],"predecessor-version":[{"id":803188,"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/pages\/780541\/revisions\/803188"}],"wp:attachment":[{"href":"https:\/\/www.hoog.design\/de\/wp-json\/wp\/v2\/media?parent=780541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}