{"id":2,"date":"2024-11-01T10:23:06","date_gmt":"2024-11-01T10:23:06","guid":{"rendered":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/?page_id=2"},"modified":"2024-12-07T17:49:03","modified_gmt":"2024-12-07T17:49:03","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"    <canvas id=\"canvas\" width=\"800\" height=\"600\" style=\"border:1px solid black;\"><\/canvas>\n    <br>\n    <input type=\"file\" id=\"imageUpload\" accept=\"image\/*\" \/>\n    <button onclick=\"exportPDF()\">Export as PDF<\/button>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fabric.js\/5.2.4\/fabric.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n    <script>\n        const canvas = new fabric.Canvas('canvas');\n\n        \/\/ Function to handle image upload\n        document.getElementById('imageUpload').addEventListener('change', function(event) {\n            const file = event.target.files[0];\n            if (file) {\n                const reader = new FileReader();\n                reader.onload = function(e) {\n                    fabric.Image.fromURL(e.target.result, (img) => {\n                        \/\/ Scale the image proportionally to fit the canvas\n                        const canvasWidth = canvas.width;\n                        const canvasHeight = canvas.height;\n\n                        const scaleX = canvasWidth \/ img.width;\n                        const scaleY = canvasHeight \/ img.height;\n                        const scale = Math.min(scaleX, scaleY);\n\n                        img.set({\n                            left: (canvasWidth - img.width * scale) \/ 2,\n                            top: (canvasHeight - img.height * scale) \/ 2,\n                            scaleX: scale,\n                            scaleY: scale,\n                            cornerStyle: 'circle', \/\/ Rounded corners for better UX\n                            cornerSize: 10, \/\/ Size of corner controls\n                            lockUniScaling: true, \/\/ Prevent disproportionate scaling\n                            borderColor: '#00aaff',\n                            cornerColor: '#00aaff',\n                        });\n\n                        \/\/ Remove side handles (only allow corner scaling)\n                        img.controls = fabric.Object.prototype.controls;\n                        delete img.controls.ml;\n                        delete img.controls.mt;\n                        delete img.controls.mr;\n                        delete img.controls.mb;\n\n                        canvas.add(img);\n                    });\n                };\n                reader.readAsDataURL(file);\n            }\n        });\n\n        \/\/ Function to export the canvas content as a PDF\n        async function exportPDF() {\n            try {\n                const { jsPDF } = window.jspdf;\n                const pdf = new jsPDF({\n                    orientation: 'landscape',\n                    unit: 'px',\n                    format: [canvas.width, canvas.height],\n                });\n\n                \/\/ Convert canvas to a data URL\n                const dataURL = canvas.toDataURL({ format: 'png', quality: 1 });\n                pdf.addImage(dataURL, 'PNG', 0, 0, canvas.width, canvas.height);\n\n                \/\/ Save the PDF\n                pdf.save('design.pdf');\n            } catch (e) {\n                alert(\"Export as PDF failed.\");\n                console.error(e);\n            }\n        }\n    <\/script>\n    \n\n\n\n<p><\/p>\n\n\n<p>[test_shortcode]<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":6,"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/wonderful-feynman.62-213-219-134.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}