{"id":1049,"date":"2026-09-30T19:47:50","date_gmt":"2026-09-30T19:47:50","guid":{"rendered":"https:\/\/mataraniskills.com\/?page_id=1049"},"modified":"2026-10-01T01:42:48","modified_gmt":"2026-10-01T01:42:48","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/mataraniskills.com\/?page_id=1049","title":{"rendered":"Contact us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1049\" class=\"elementor elementor-1049\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c9dfa5 e-con e-atomic-element e-flexbox-base e-default-div e-6d0c939 \" data-id=\"7c9dfa5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7c9dfa5\" data-e-type=\"e-flexbox\" data-id=\"7c9dfa5\">\n    \t\t<div class=\"elementor-element elementor-element-ad65886 elementor-widget elementor-widget-html\" data-id=\"ad65886\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t```html\r\n<div id=\"passportTool\">\r\n\r\n<style>\r\n#passportTool{\r\n    font-family:Arial,sans-serif;\r\n    max-width:1100px;\r\n    margin:auto;\r\n    background:#f5f7fa;\r\n    padding:20px;\r\n    border-radius:14px;\r\n    color:#172033;\r\n}\r\n\r\n#passportTool *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n.pp-title{\r\n    text-align:center;\r\n    margin-bottom:20px;\r\n}\r\n\r\n.pp-title h2{\r\n    margin:0 0 6px;\r\n    font-size:26px;\r\n}\r\n\r\n.pp-title p{\r\n    margin:0;\r\n    color:#667085;\r\n}\r\n\r\n.pp-toolbar{\r\n    background:#fff;\r\n    padding:15px;\r\n    border-radius:12px;\r\n    box-shadow:0 3px 12px rgba(0,0,0,.08);\r\n    margin-bottom:20px;\r\n}\r\n\r\n.pp-row{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:10px;\r\n    align-items:center;\r\n}\r\n\r\n.pp-file{\r\n    background:#2563eb;\r\n    color:#fff;\r\n    padding:11px 16px;\r\n    border-radius:7px;\r\n    cursor:pointer;\r\n    font-weight:bold;\r\n    display:inline-block;\r\n}\r\n\r\n.pp-file input{\r\n    display:none;\r\n}\r\n\r\n.pp-btn{\r\n    border:0;\r\n    background:#334155;\r\n    color:#fff;\r\n    padding:10px 14px;\r\n    border-radius:7px;\r\n    cursor:pointer;\r\n    font-weight:bold;\r\n}\r\n\r\n.pp-btn:hover{\r\n    opacity:.9;\r\n}\r\n\r\n.pp-green{\r\n    background:#16a34a;\r\n}\r\n\r\n.pp-red{\r\n    background:#dc2626;\r\n}\r\n\r\n.pp-control{\r\n    padding:9px;\r\n    border:1px solid #cbd5e1;\r\n    border-radius:6px;\r\n    background:#fff;\r\n}\r\n\r\n.pp-editor{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:20px;\r\n}\r\n\r\n.pp-panel{\r\n    background:#fff;\r\n    padding:15px;\r\n    border-radius:12px;\r\n    box-shadow:0 3px 12px rgba(0,0,0,.08);\r\n}\r\n\r\n.pp-panel h3{\r\n    margin-top:0;\r\n}\r\n\r\n.pp-canvas-box{\r\n    background:#1e293b;\r\n    border-radius:8px;\r\n    min-height:430px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    overflow:hidden;\r\n    position:relative;\r\n}\r\n\r\n#ppCanvas{\r\n    max-width:100%;\r\n    max-height:430px;\r\n    cursor:crosshair;\r\n}\r\n\r\n.pp-help{\r\n    font-size:13px;\r\n    color:#667085;\r\n    line-height:1.5;\r\n}\r\n\r\n.pp-buttons{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:7px;\r\n    margin-top:12px;\r\n}\r\n\r\n.pp-buttons button{\r\n    border:0;\r\n    padding:8px 11px;\r\n    background:#475569;\r\n    color:white;\r\n    border-radius:6px;\r\n    cursor:pointer;\r\n}\r\n\r\n.pp-settings{\r\n    margin-top:15px;\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:10px;\r\n}\r\n\r\n.pp-settings label{\r\n    font-size:13px;\r\n    font-weight:bold;\r\n}\r\n\r\n.pp-settings select,\r\n.pp-settings input{\r\n    width:100%;\r\n    margin-top:5px;\r\n    padding:9px;\r\n    border:1px solid #cbd5e1;\r\n    border-radius:6px;\r\n}\r\n\r\n.pp-preview{\r\n    margin-top:20px;\r\n    background:#fff;\r\n    padding:20px;\r\n    border-radius:12px;\r\n    box-shadow:0 3px 12px rgba(0,0,0,.08);\r\n}\r\n\r\n.pp-preview h3{\r\n    text-align:center;\r\n}\r\n\r\n.a4-sheet{\r\n    width:210mm;\r\n    min-height:297mm;\r\n    background:white;\r\n    margin:20px auto;\r\n    padding:10mm;\r\n    display:grid;\r\n    grid-template-columns:repeat(5,35mm);\r\n    grid-auto-rows:45mm;\r\n    gap:4mm;\r\n    align-content:start;\r\n    justify-content:center;\r\n    box-shadow:0 2px 15px rgba(0,0,0,.15);\r\n}\r\n\r\n.photo-item{\r\n    width:35mm;\r\n    height:45mm;\r\n    overflow:hidden;\r\n    background:#fff;\r\n}\r\n\r\n.photo-item img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    display:block;\r\n}\r\n\r\n.pp-note{\r\n    text-align:center;\r\n    font-size:13px;\r\n    color:#667085;\r\n}\r\n\r\n@media(max-width:800px){\r\n\r\n    .pp-editor{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .pp-settings{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .a4-sheet{\r\n        transform:scale(.75);\r\n        transform-origin:top center;\r\n        margin-bottom:-70mm;\r\n    }\r\n}\r\n\r\n\/* PRINT *\/\r\n\r\n@media print{\r\n\r\n    body{\r\n        margin:0!important;\r\n        padding:0!important;\r\n        background:white!important;\r\n    }\r\n\r\n    body *{\r\n        visibility:hidden!important;\r\n    }\r\n\r\n    #passportTool,\r\n    #passportTool *{\r\n        visibility:hidden!important;\r\n    }\r\n\r\n    #ppPrintArea,\r\n    #ppPrintArea *{\r\n        visibility:visible!important;\r\n    }\r\n\r\n    #ppPrintArea{\r\n        display:block!important;\r\n        position:absolute;\r\n        left:0;\r\n        top:0;\r\n        width:210mm;\r\n        height:297mm;\r\n        background:white;\r\n    }\r\n\r\n    #ppPrintSheet{\r\n        width:210mm;\r\n        height:297mm;\r\n        background:white;\r\n        padding:10mm;\r\n        display:grid;\r\n        grid-template-columns:repeat(5,35mm);\r\n        grid-auto-rows:45mm;\r\n        gap:4mm;\r\n        align-content:start;\r\n        justify-content:center;\r\n    }\r\n\r\n    #ppPrintSheet .photo-item{\r\n        width:30mm;\r\n        height:35mm;\r\n        overflow:hidden;\r\n    }\r\n\r\n    #ppPrintSheet img{\r\n        width:30mm;\r\n        height:35mm;\r\n        object-fit:cover;\r\n    }\r\n\r\n    @page{\r\n        size:A4 portrait;\r\n        margin:0;\r\n    }\r\n}\r\n\r\n#ppPrintArea{\r\n    display:none;\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"pp-title\">\r\n    <h2>\ud83d\udcf7 Passport Photo A4 Printing Tool<\/h2>\r\n    <p>Upload \u2192 Manual Crop \u2192 Set Size \u2192 A4 Print<\/p>\r\n<\/div>\r\n\r\n\r\n<!-- TOOLBAR -->\r\n\r\n<div class=\"pp-toolbar\">\r\n\r\n    <div class=\"pp-row\">\r\n\r\n        <label class=\"pp-file\">\r\n            \ud83d\udcf7 Upload Photo\r\n            <input\r\n                type=\"file\"\r\n                id=\"ppPhoto\"\r\n                accept=\"image\/*\"\r\n            >\r\n        <\/label>\r\n\r\n        <button\r\n            class=\"pp-btn\"\r\n            onclick=\"ppReset()\">\r\n            Reset\r\n        <\/button>\r\n\r\n        <button\r\n            class=\"pp-btn pp-green\"\r\n            onclick=\"ppUpdatePreview()\">\r\n            Update A4 Preview\r\n        <\/button>\r\n\r\n        <button\r\n            class=\"pp-btn pp-red\"\r\n            onclick=\"ppPrint()\">\r\n            \ud83d\udda8\ufe0f Print A4\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"pp-editor\">\r\n\r\n\r\n<!-- PHOTO EDITOR -->\r\n\r\n<div class=\"pp-panel\">\r\n\r\n    <h3>\u2702\ufe0f Manual Photo Crop<\/h3>\r\n\r\n    <div class=\"pp-canvas-box\">\r\n\r\n        <canvas id=\"ppCanvas\"><\/canvas>\r\n\r\n    <\/div>\r\n\r\n    <p class=\"pp-help\">\r\n        Mouse \u0938\u0947 photo \u092a\u0930 rectangle drag \u0915\u0930\u0915\u0947 crop area select \u0915\u0930\u0947\u0902\u0964\r\n        <br>\r\n        Crop \u0915\u0947 \u092c\u093e\u0926 photo \u0915\u094b Zoom, Move \u0914\u0930 Rotate \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964\r\n    <\/p>\r\n\r\n    <div class=\"pp-buttons\">\r\n\r\n        <button onclick=\"ppZoom(1.1)\">\r\n            \ud83d\udd0d Zoom +\r\n        <\/button>\r\n\r\n        <button onclick=\"ppZoom(.9)\">\r\n            \ud83d\udd0d Zoom \u2212\r\n        <\/button>\r\n\r\n        <button onclick=\"ppMove(-10,0)\">\r\n            \u2190 Left\r\n        <\/button>\r\n\r\n        <button onclick=\"ppMove(10,0)\">\r\n            Right \u2192\r\n        <\/button>\r\n\r\n        <button onclick=\"ppMove(0,-10)\">\r\n            \u2191 Up\r\n        <\/button>\r\n\r\n        <button onclick=\"ppMove(0,10)\">\r\n            \u2193 Down\r\n        <\/button>\r\n\r\n        <button onclick=\"ppRotate()\">\r\n            \u21bb Rotate\r\n        <\/button>\r\n\r\n        <button onclick=\"ppResetCrop()\">\r\n            Reset Crop\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- SETTINGS -->\r\n\r\n<div class=\"pp-panel\">\r\n\r\n    <h3>\u2699\ufe0f Photo Settings<\/h3>\r\n\r\n    <div class=\"pp-settings\">\r\n\r\n        <div>\r\n\r\n            <label>\r\n                Photo Size\r\n            <\/label>\r\n\r\n            <select id=\"ppSize\"\r\n                    onchange=\"ppUpdatePreview()\">\r\n\r\n                <option value=\"35x45\">\r\n                    30 \u00d7 55 mm\r\n                <\/option>\r\n\r\n                <option value=\"25x35\">\r\n                    25 \u00d7 35 mm\r\n                <\/option>\r\n\r\n                <option value=\"51x51\">\r\n                    51 \u00d7 51 mm\r\n                <\/option>\r\n\r\n            <\/select>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div>\r\n\r\n            <label>\r\n                Copies\r\n            <\/label>\r\n\r\n            <select id=\"ppCopies\"\r\n                    onchange=\"ppUpdatePreview()\">\r\n\r\n                <option value=\"6\">6<\/option>\r\n                <option value=\"12\">12<\/option>\r\n                <option value=\"18\">183<\/option>\r\n                <option value=\"24\">24<\/option>\r\n                <option value=\"16\">16<\/option>\r\n                <option value=\"20\">20<\/option>\r\n                <option value=\"24\" selected>24<\/option>\r\n                <option value=\"30\">30<\/option>\r\n                <option value=\"35\">35<\/option>\r\n\r\n            <\/select>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div>\r\n\r\n            <label>\r\n                Background\r\n            <\/label>\r\n\r\n            <select id=\"ppBg\"\r\n                    onchange=\"ppUpdatePreview()\">\r\n\r\n                <option value=\"white\">\r\n                    White\r\n                <\/option>\r\n\r\n                <option value=\"blue\">\r\n                    Blue\r\n                <\/option>\r\n\r\n            <\/select>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <hr>\r\n\r\n\r\n    <p class=\"pp-help\">\r\n\r\n        <b>Standard Passport Photo:<\/b><br>\r\n        35 \u00d7 45 mm\r\n\r\n        <br><br>\r\n\r\n        A4 paper size:<br>\r\n        210 \u00d7 297 mm\r\n\r\n        <br><br>\r\n\r\n        Current default layout:<br>\r\n        5 photos per row \u00d7 5 rows\r\n\r\n    <\/p>\r\n\r\n\r\n    <button\r\n        class=\"pp-btn pp-green\"\r\n        onclick=\"ppUpdatePreview()\">\r\n        Generate A4 Sheet\r\n    <\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- A4 PREVIEW -->\r\n\r\n<div class=\"pp-preview\">\r\n\r\n    <h3>\ud83d\udcc4 A4 Paper Preview<\/h3>\r\n\r\n    <div id=\"ppA4Preview\"><\/div>\r\n\r\n    <p class=\"pp-note\">\r\n        Actual print \u092e\u0947\u0902 A4 size \u0914\u0930 35\u00d745 mm dimensions maintain \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f\r\n        browser print dialog \u092e\u0947\u0902 Scale = 100% \u0930\u0916\u0947\u0902\u0964\r\n    <\/p>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- PRINT AREA -->\r\n\r\n<div id=\"ppPrintArea\">\r\n\r\n    <div id=\"ppPrintSheet\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\nlet ppImage = null;\r\n\r\nlet ppScale = 1;\r\n\r\nlet ppOffsetX = 0;\r\nlet ppOffsetY = 0;\r\n\r\nlet ppRotation = 0;\r\n\r\nlet ppCrop = null;\r\n\r\nlet ppDragging = false;\r\n\r\nlet ppStartX = 0;\r\nlet ppStartY = 0;\r\n\r\n\r\n\/* ============================\r\n   LOAD PHOTO\r\n============================ *\/\r\n\r\ndocument\r\n.getElementById(\"ppPhoto\")\r\n.addEventListener(\"change\",function(e){\r\n\r\n    const file = e.target.files[0];\r\n\r\n    if(!file) return;\r\n\r\n    const reader = new FileReader();\r\n\r\n    reader.onload = function(ev){\r\n\r\n        const img = new Image();\r\n\r\n        img.onload = function(){\r\n\r\n            ppImage = img;\r\n\r\n            ppScale = 1;\r\n            ppOffsetX = 0;\r\n            ppOffsetY = 0;\r\n            ppRotation = 0;\r\n            ppCrop = null;\r\n\r\n            ppDraw();\r\n\r\n        };\r\n\r\n        img.src = ev.target.result;\r\n\r\n    };\r\n\r\n    reader.readAsDataURL(file);\r\n\r\n});\r\n\r\n\r\n\/* ============================\r\n   DRAW IMAGE\r\n============================ *\/\r\n\r\nfunction ppDraw(){\r\n\r\n    if(!ppImage) return;\r\n\r\n    const canvas =\r\n        document.getElementById(\"ppCanvas\");\r\n\r\n    const ctx =\r\n        canvas.getContext(\"2d\");\r\n\r\n    const maxWidth = 650;\r\n    const maxHeight = 430;\r\n\r\n    let ratio =\r\n        Math.min(\r\n            maxWidth \/ ppImage.width,\r\n            maxHeight \/ ppImage.height\r\n        );\r\n\r\n    canvas.width =\r\n        ppImage.width * ratio;\r\n\r\n    canvas.height =\r\n        ppImage.height * ratio;\r\n\r\n    ctx.clearRect(\r\n        0,\r\n        0,\r\n        canvas.width,\r\n        canvas.height\r\n    );\r\n\r\n    ctx.save();\r\n\r\n    ctx.translate(\r\n        canvas.width\/2 + ppOffsetX,\r\n        canvas.height\/2 + ppOffsetY\r\n    );\r\n\r\n    ctx.rotate(\r\n        ppRotation * Math.PI \/ 180\r\n    );\r\n\r\n    ctx.scale(\r\n        ppScale,\r\n        ppScale\r\n    );\r\n\r\n    ctx.drawImage(\r\n        ppImage,\r\n        -canvas.width\/2,\r\n        -canvas.height\/2,\r\n        canvas.width,\r\n        canvas.height\r\n    );\r\n\r\n    ctx.restore();\r\n\r\n\r\n    \/* crop selection *\/\r\n\r\n    if(ppCrop){\r\n\r\n        ctx.save();\r\n\r\n        ctx.strokeStyle =\r\n            \"#00ff66\";\r\n\r\n        ctx.lineWidth = 3;\r\n\r\n        ctx.setLineDash([8,5]);\r\n\r\n        ctx.strokeRect(\r\n            ppCrop.x,\r\n            ppCrop.y,\r\n            ppCrop.width,\r\n            ppCrop.height\r\n        );\r\n\r\n        ctx.restore();\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   MANUAL CROP\r\n============================ *\/\r\n\r\nconst ppCanvas =\r\n    document.getElementById(\"ppCanvas\");\r\n\r\n\r\nppCanvas.addEventListener(\r\n    \"mousedown\",\r\n    function(e){\r\n\r\n        if(!ppImage) return;\r\n\r\n        const rect =\r\n            ppCanvas.getBoundingClientRect();\r\n\r\n        ppStartX =\r\n            e.clientX - rect.left;\r\n\r\n        ppStartY =\r\n            e.clientY - rect.top;\r\n\r\n        ppDragging = true;\r\n\r\n        ppCrop = {\r\n            x:ppStartX,\r\n            y:ppStartY,\r\n            width:0,\r\n            height:0\r\n        };\r\n\r\n    }\r\n);\r\n\r\n\r\nppCanvas.addEventListener(\r\n    \"mousemove\",\r\n    function(e){\r\n\r\n        if(!ppDragging) return;\r\n\r\n        const rect =\r\n            ppCanvas.getBoundingClientRect();\r\n\r\n        const x =\r\n            e.clientX - rect.left;\r\n\r\n        const y =\r\n            e.clientY - rect.top;\r\n\r\n        ppCrop.width =\r\n            x - ppStartX;\r\n\r\n        ppCrop.height =\r\n            y - ppStartY;\r\n\r\n        ppDraw();\r\n\r\n    }\r\n);\r\n\r\n\r\nppCanvas.addEventListener(\r\n    \"mouseup\",\r\n    function(){\r\n\r\n        ppDragging = false;\r\n\r\n        if(ppCrop){\r\n\r\n            if(ppCrop.width < 0){\r\n\r\n                ppCrop.x +=\r\n                    ppCrop.width;\r\n\r\n                ppCrop.width =\r\n                    Math.abs(ppCrop.width);\r\n\r\n            }\r\n\r\n            if(ppCrop.height < 0){\r\n\r\n                ppCrop.y +=\r\n                    ppCrop.height;\r\n\r\n                ppCrop.height =\r\n                    Math.abs(ppCrop.height);\r\n\r\n            }\r\n\r\n        }\r\n\r\n        ppDraw();\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* ============================\r\n   ZOOM\r\n============================ *\/\r\n\r\nfunction ppZoom(value){\r\n\r\n    ppScale *= value;\r\n\r\n    if(ppScale < .2)\r\n        ppScale = .2;\r\n\r\n    if(ppScale > 5)\r\n        ppScale = 5;\r\n\r\n    ppDraw();\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   MOVE\r\n============================ *\/\r\n\r\nfunction ppMove(x,y){\r\n\r\n    ppOffsetX += x;\r\n    ppOffsetY += y;\r\n\r\n    ppDraw();\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   ROTATE\r\n============================ *\/\r\n\r\nfunction ppRotate(){\r\n\r\n    ppRotation += 90;\r\n\r\n    if(ppRotation >= 360)\r\n        ppRotation = 0;\r\n\r\n    ppDraw();\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   RESET CROP\r\n============================ *\/\r\n\r\nfunction ppResetCrop(){\r\n\r\n    ppCrop = null;\r\n\r\n    ppScale = 1;\r\n\r\n    ppOffsetX = 0;\r\n    ppOffsetY = 0;\r\n\r\n    ppRotation = 0;\r\n\r\n    ppDraw();\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   GET PHOTO DATA\r\n============================ *\/\r\n\r\nfunction ppGetPhoto(){\r\n\r\n    if(!ppImage)\r\n        return null;\r\n\r\n    const size =\r\n        document.getElementById(\"ppSize\").value;\r\n\r\n    let parts =\r\n        size.split(\"x\");\r\n\r\n    let w =\r\n        parseFloat(parts[0]);\r\n\r\n    let h =\r\n        parseFloat(parts[1]);\r\n\r\n\r\n    \/*\r\n      High resolution output\r\n    *\/\r\n\r\n    const output =\r\n        document.createElement(\"canvas\");\r\n\r\n    output.width =\r\n        Math.round(w * 12);\r\n\r\n    output.height =\r\n        Math.round(h * 12);\r\n\r\n    const ctx =\r\n        output.getContext(\"2d\");\r\n\r\n\r\n    \/* background *\/\r\n\r\n    const bg =\r\n        document.getElementById(\"ppBg\").value;\r\n\r\n    if(bg === \"blue\"){\r\n\r\n        ctx.fillStyle =\r\n            \"#d9efff\";\r\n\r\n    }else{\r\n\r\n        ctx.fillStyle =\r\n            \"#ffffff\";\r\n\r\n    }\r\n\r\n    ctx.fillRect(\r\n        0,\r\n        0,\r\n        output.width,\r\n        output.height\r\n    );\r\n\r\n\r\n    \/*\r\n      Draw current canvas\r\n    *\/\r\n\r\n    const source =\r\n        document.getElementById(\"ppCanvas\");\r\n\r\n    ctx.drawImage(\r\n        source,\r\n        0,\r\n        0,\r\n        output.width,\r\n        output.height\r\n    );\r\n\r\n\r\n    return output.toDataURL(\r\n        \"image\/jpeg\",\r\n        .95\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   UPDATE A4 PREVIEW\r\n============================ *\/\r\n\r\nfunction ppUpdatePreview(){\r\n\r\n    if(!ppImage){\r\n\r\n        alert(\r\n            \"Please upload a photo first.\"\r\n        );\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    const photo =\r\n        ppGetPhoto();\r\n\r\n    if(!photo) return;\r\n\r\n\r\n    const copies =\r\n        parseInt(\r\n            document.getElementById(\r\n                \"ppCopies\"\r\n            ).value\r\n        );\r\n\r\n\r\n    const preview =\r\n        document.getElementById(\r\n            \"ppA4Preview\"\r\n        );\r\n\r\n    const sheet =\r\n        document.createElement(\"div\");\r\n\r\n    sheet.className =\r\n        \"a4-sheet\";\r\n\r\n\r\n    for(\r\n        let i=0;\r\n        i<copies;\r\n        i++\r\n    ){\r\n\r\n        const item =\r\n            document.createElement(\"div\");\r\n\r\n        item.className =\r\n            \"photo-item\";\r\n\r\n        const img =\r\n            document.createElement(\"img\");\r\n\r\n        img.src =\r\n            photo;\r\n\r\n        item.appendChild(img);\r\n\r\n        sheet.appendChild(item);\r\n\r\n    }\r\n\r\n\r\n    preview.innerHTML = \"\";\r\n\r\n    preview.appendChild(sheet);\r\n\r\n\r\n    \/*\r\n      Print copy\r\n    *\/\r\n\r\n    const printSheet =\r\n        document.getElementById(\r\n            \"ppPrintSheet\"\r\n        );\r\n\r\n    printSheet.innerHTML = \"\";\r\n\r\n\r\n    for(\r\n        let i=0;\r\n        i<copies;\r\n        i++\r\n    ){\r\n\r\n        const item =\r\n            document.createElement(\"div\");\r\n\r\n        item.className =\r\n            \"photo-item\";\r\n\r\n        const img =\r\n            document.createElement(\"img\");\r\n\r\n        img.src =\r\n            photo;\r\n\r\n        item.appendChild(img);\r\n\r\n        printSheet.appendChild(item);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   PRINT\r\n============================ *\/\r\n\r\nfunction ppPrint(){\r\n\r\n    if(!ppImage){\r\n\r\n        alert(\r\n            \"Please upload a photo first.\"\r\n        );\r\n\r\n        return;\r\n\r\n    }\r\n\r\n    ppUpdatePreview();\r\n\r\n    setTimeout(\r\n        function(){\r\n\r\n            window.print();\r\n\r\n        },\r\n        500\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* ============================\r\n   RESET\r\n============================ *\/\r\n\r\nfunction ppReset(){\r\n\r\n    document.getElementById(\r\n        \"ppPhoto\"\r\n    ).value = \"\";\r\n\r\n    ppImage = null;\r\n\r\n    ppCrop = null;\r\n\r\n    ppScale = 1;\r\n\r\n    ppOffsetX = 0;\r\n    ppOffsetY = 0;\r\n\r\n    ppRotation = 0;\r\n\r\n    document.getElementById(\r\n        \"ppA4Preview\"\r\n    ).innerHTML = \"\";\r\n\r\n    document.getElementById(\r\n        \"ppPrintSheet\"\r\n    ).innerHTML = \"\";\r\n\r\n    const canvas =\r\n        document.getElementById(\r\n            \"ppCanvas\"\r\n        );\r\n\r\n    canvas.width = 300;\r\n    canvas.height = 200;\r\n\r\n    canvas\r\n        .getContext(\"2d\")\r\n        .clearRect(\r\n            0,\r\n            0,\r\n            canvas.width,\r\n            canvas.height\r\n        );\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/div>\r\n```\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#8220;`html \ud83d\udcf7 Passport Photo A4 Printing Tool Upload \u2192 Manual Crop \u2192 Set Size \u2192 A4 Print \ud83d\udcf7 Upload Photo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1049","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mataraniskills.com\/index.php?rest_route=\/wp\/v2\/pages\/1049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mataraniskills.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mataraniskills.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mataraniskills.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mataraniskills.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1049"}],"version-history":[{"count":70,"href":"https:\/\/mataraniskills.com\/index.php?rest_route=\/wp\/v2\/pages\/1049\/revisions"}],"predecessor-version":[{"id":1147,"href":"https:\/\/mataraniskills.com\/index.php?rest_route=\/wp\/v2\/pages\/1049\/revisions\/1147"}],"wp:attachment":[{"href":"https:\/\/mataraniskills.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}