{"id":2305,"date":"2025-02-12T02:18:57","date_gmt":"2025-02-12T02:18:57","guid":{"rendered":"https:\/\/donhit.com\/en\/?p=2305"},"modified":"2025-02-12T02:23:06","modified_gmt":"2025-02-12T02:23:06","slug":"frame","status":"publish","type":"post","link":"https:\/\/donhit.com\/en\/calculator\/frame\/","title":{"rendered":"Frame Calculator"},"content":{"rendered":"<p><center><div class=\"container123\">\r\n        <div class=\"input-section\">\r\n            <h2>Professional Framing Calculator<\/h2>\r\n            <div class=\"input-group\">\r\n                <label for=\"artwork-width\">Artwork Width (inches)<\/label>\r\n                <input type=\"number\" id=\"artwork-width\" min=\"1\" step=\"0.1\" value=\"10\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"artwork-height\">Artwork Height (inches)<\/label>\r\n                <input type=\"number\" id=\"artwork-height\" min=\"1\" step=\"0.1\" value=\"8\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"frame-width\">Frame Width (inches)<\/label>\r\n                <input type=\"number\" id=\"frame-width\" min=\"0.5\" step=\"0.1\" value=\"2\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"mat-width\">Mat Width (inches)<\/label>\r\n                <input type=\"number\" id=\"mat-width\" min=\"0\" step=\"0.1\" value=\"1\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"frame-color\">Frame Color<\/label>\r\n                <input type=\"color\" id=\"frame-color\" class=\"color-picker\" value=\"#4a4a4a\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"mat-color\">Mat Color<\/label>\r\n                <input type=\"color\" id=\"mat-color\" class=\"color-picker\" value=\"#ffffff\">\r\n            <\/div>\r\n            <div class=\"button-group\">\r\n                <button class=\"calculate-btn\" onclick=\"updateFrame()\">Calculate & Preview<\/button>\r\n                <button class=\"reset-btn\" onclick=\"resetValues()\">Reset<\/button>\r\n            <\/div>\r\n            <div class=\"results\">\r\n                <div class=\"result-item\">\r\n                    <span class=\"result-label\">Total Width:<\/span>\r\n                    <span class=\"result-value\" id=\"total-width\">0 inches<\/span>\r\n                <\/div>\r\n                <div class=\"result-item\">\r\n                    <span class=\"result-label\">Total Height:<\/span>\r\n                    <span class=\"result-value\" id=\"total-height\">0 inches<\/span>\r\n                <\/div>\r\n                <div class=\"result-item\">\r\n                    <span class=\"result-label\">Frame Perimeter:<\/span>\r\n                    <span class=\"result-value\" id=\"frame-perimeter\">0 inches<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"preview-section\">\r\n            <canvas id=\"preview-canvas\"><\/canvas>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const canvas = document.getElementById('preview-canvas');\r\n        const ctx = canvas.getContext('2d');\r\n\r\n        \/\/ Set canvas size\r\n        function resizeCanvas() {\r\n            const container = document.querySelector('.preview-section');\r\n            canvas.width = container.clientWidth - 40;\r\n            canvas.height = container.clientWidth - 40;\r\n        }\r\n\r\n        window.addEventListener('resize', resizeCanvas);\r\n        resizeCanvas();\r\n\r\n        function updateFrame() {\r\n            const artworkWidth = parseFloat(document.getElementById('artwork-width').value);\r\n            const artworkHeight = parseFloat(document.getElementById('artwork-height').value);\r\n            const frameWidth = parseFloat(document.getElementById('frame-width').value);\r\n            const matWidth = parseFloat(document.getElementById('mat-width').value);\r\n            const frameColor = document.getElementById('frame-color').value;\r\n            const matColor = document.getElementById('mat-color').value;\r\n\r\n            \/\/ Calculate total dimensions\r\n            const totalWidth = artworkWidth + (matWidth + frameWidth) * 2;\r\n            const totalHeight = artworkHeight + (matWidth + frameWidth) * 2;\r\n            const framePerimeter = (totalWidth + totalHeight) * 2;\r\n\r\n            \/\/ Update results\r\n            document.getElementById('total-width').textContent = `${totalWidth.toFixed(1)} inches`;\r\n            document.getElementById('total-height').textContent = `${totalHeight.toFixed(1)} inches`;\r\n            document.getElementById('frame-perimeter').textContent = `${framePerimeter.toFixed(1)} inches`;\r\n\r\n            \/\/ Clear canvas\r\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n            \/\/ Calculate scaling factor to fit in canvas\r\n            const scale = Math.min(\r\n                (canvas.width - 40) \/ totalWidth,\r\n                (canvas.height - 40) \/ totalHeight\r\n            );\r\n\r\n            \/\/ Calculate centered position\r\n            const startX = (canvas.width - totalWidth * scale) \/ 2;\r\n            const startY = (canvas.height - totalHeight * scale) \/ 2;\r\n\r\n            \/\/ Draw frame\r\n            ctx.fillStyle = frameColor;\r\n            ctx.fillRect(startX, startY, totalWidth * scale, totalHeight * scale);\r\n\r\n            \/\/ Draw mat\r\n            ctx.fillStyle = matColor;\r\n            ctx.fillRect(\r\n                startX + frameWidth * scale,\r\n                startY + frameWidth * scale,\r\n                (totalWidth - frameWidth * 2) * scale,\r\n                (totalHeight - frameWidth * 2) * scale\r\n            );\r\n\r\n            \/\/ Draw artwork area\r\n            ctx.fillStyle = '#f0f0f0';\r\n            ctx.fillRect(\r\n                startX + (frameWidth + matWidth) * scale,\r\n                startY + (frameWidth + matWidth) * scale,\r\n                artworkWidth * scale,\r\n                artworkHeight * scale\r\n            );\r\n\r\n            \/\/ Add artwork pattern\r\n            ctx.strokeStyle = '#ddd';\r\n            ctx.lineWidth = 1;\r\n            const patternSize = 10;\r\n            for (let i = 0; i <= artworkWidth * scale; i += patternSize) {\r\n                ctx.beginPath();\r\n                ctx.moveTo(startX + (frameWidth + matWidth) * scale + i, startY + (frameWidth + matWidth) * scale);\r\n                ctx.lineTo(startX + (frameWidth + matWidth) * scale + i, startY + (frameWidth + matWidth + artworkHeight) * scale);\r\n                ctx.stroke();\r\n            }\r\n            for (let i = 0; i <= artworkHeight * scale; i += patternSize) {\r\n                ctx.beginPath();\r\n                ctx.moveTo(startX + (frameWidth + matWidth) * scale, startY + (frameWidth + matWidth) * scale + i);\r\n                ctx.lineTo(startX + (frameWidth + matWidth + artworkWidth) * scale, startY + (frameWidth + matWidth) * scale + i);\r\n                ctx.stroke();\r\n            }\r\n        }\r\n\r\n        function resetValues() {\r\n            document.getElementById('artwork-width').value = 10;\r\n            document.getElementById('artwork-height').value = 8;\r\n            document.getElementById('frame-width').value = 2;\r\n            document.getElementById('mat-width').value = 1;\r\n            document.getElementById('frame-color').value = '#4a4a4a';\r\n            document.getElementById('mat-color').value = '#ffffff';\r\n            updateFrame();\r\n        }\r\n\r\n        \/\/ Initial render\r\n        updateFrame();\r\n    <\/script><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[184],"tags":[],"class_list":["post-2305","post","type-post","status-publish","format-standard","hentry","category-calculator"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Frame Calculator - DonHit<\/title>\n<meta name=\"description\" content=\"Calculate precise frame dimensions with our Frame Calculator. Get accurate measurements for picture frames, windows, and more in seconds!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/donhit.com\/en\/calculator\/frame\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frame Calculator - DonHit\" \/>\n<meta property=\"og:description\" content=\"Calculate precise frame dimensions with our Frame Calculator. Get accurate measurements for picture frames, windows, and more in seconds!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/donhit.com\/en\/calculator\/frame\/\" \/>\n<meta property=\"og:site_name\" content=\"DonHit - World of Tools\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-12T02:18:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-12T02:23:06+00:00\" \/>\n<meta name=\"author\" content=\"DonHit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DonHit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frame Calculator - DonHit","description":"Calculate precise frame dimensions with our Frame Calculator. Get accurate measurements for picture frames, windows, and more in seconds!","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:\/\/donhit.com\/en\/calculator\/frame\/","og_locale":"en_US","og_type":"article","og_title":"Frame Calculator - DonHit","og_description":"Calculate precise frame dimensions with our Frame Calculator. Get accurate measurements for picture frames, windows, and more in seconds!","og_url":"https:\/\/donhit.com\/en\/calculator\/frame\/","og_site_name":"DonHit - World of Tools","article_published_time":"2025-02-12T02:18:57+00:00","article_modified_time":"2025-02-12T02:23:06+00:00","author":"DonHit","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DonHit","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/donhit.com\/en\/calculator\/frame\/#article","isPartOf":{"@id":"https:\/\/donhit.com\/en\/calculator\/frame\/"},"author":{"name":"DonHit","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"headline":"Frame Calculator","datePublished":"2025-02-12T02:18:57+00:00","dateModified":"2025-02-12T02:23:06+00:00","mainEntityOfPage":{"@id":"https:\/\/donhit.com\/en\/calculator\/frame\/"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"articleSection":["Calculator"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/donhit.com\/en\/calculator\/frame\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/donhit.com\/en\/calculator\/frame\/","url":"https:\/\/donhit.com\/en\/calculator\/frame\/","name":"Frame Calculator - DonHit","isPartOf":{"@id":"https:\/\/donhit.com\/en\/#website"},"datePublished":"2025-02-12T02:18:57+00:00","dateModified":"2025-02-12T02:23:06+00:00","description":"Calculate precise frame dimensions with our Frame Calculator. Get accurate measurements for picture frames, windows, and more in seconds!","breadcrumb":{"@id":"https:\/\/donhit.com\/en\/calculator\/frame\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/donhit.com\/en\/calculator\/frame\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/donhit.com\/en\/calculator\/frame\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/donhit.com\/en\/"},{"@type":"ListItem","position":2,"name":"Calculator","item":"https:\/\/donhit.com\/en\/category\/calculator\/"},{"@type":"ListItem","position":3,"name":"Frame Calculator"}]},{"@type":"WebSite","@id":"https:\/\/donhit.com\/en\/#website","url":"https:\/\/donhit.com\/en\/","name":"DonHit - World of tools","description":"","publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/donhit.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148","name":"DonHit","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","contentUrl":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","width":400,"height":267,"caption":"DonHit"},"logo":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/"},"description":"DonHit is a website designed to provide useful tools for everyone. Its primary goal is to support and empower the community. All the tools available on the site are completely free to use.","sameAs":["https:\/\/donhit.com\/en"],"url":"https:\/\/donhit.com\/en\/author\/admin_don\/"}]}},"_links":{"self":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/2305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/comments?post=2305"}],"version-history":[{"count":1,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/2305\/revisions"}],"predecessor-version":[{"id":2306,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/2305\/revisions\/2306"}],"wp:attachment":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/media?parent=2305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/categories?post=2305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/tags?post=2305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}