{"id":628,"date":"2025-09-13T06:09:43","date_gmt":"2025-09-13T06:09:43","guid":{"rendered":"https:\/\/tipsbyanita.in\/?page_id=628"},"modified":"2025-09-13T06:09:47","modified_gmt":"2025-09-13T06:09:47","slug":"image-format-converter","status":"publish","type":"page","link":"https:\/\/tipsbyanita.in\/hi\/image-format-converter\/","title":{"rendered":"Image format converter"},"content":{"rendered":"<style>\n.wp-image-converter-widget {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n    max-width: 100%;\n    background: #f8f9fa;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n    margin: 0 auto;\n    border: 1px solid #e2e4e7;\n}\n\n.wp-image-converter-widget h3 {\n    color: #23282d;\n    text-align: center;\n    margin: 0 0 15px 0;\n    font-size: 18px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #e2e4e7;\n}\n\n.wp-image-converter-widget .description {\n    color: #666;\n    text-align: center;\n    margin-bottom: 15px;\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n.wp-image-converter-widget .upload-area {\n    border: 2px dashed #007cba;\n    border-radius: 4px;\n    padding: 20px;\n    margin-bottom: 15px;\n    text-align: center;\n    background: #f0f6fc;\n    cursor: pointer;\n    transition: all 0.3s;\n}\n\n.wp-image-converter-widget .upload-area:hover {\n    background: #e8f0fe;\n    border-color: #005a87;\n}\n\n.wp-image-converter-widget .upload-area.dragover {\n    background: #e1f5fe;\n    border-color: #0288d1;\n}\n\n.wp-image-converter-widget .upload-icon {\n    font-size: 32px;\n    color: #007cba;\n    margin-bottom: 8px;\n}\n\n.wp-image-converter-widget .upload-text {\n    color: #555;\n    font-size: 14px;\n    margin: 0;\n}\n\n.wp-image-converter-widget .file-input {\n    display: none;\n}\n\n.wp-image-converter-widget .file-info {\n    background: #fff;\n    padding: 10px 12px;\n    border-radius: 4px;\n    margin-bottom: 15px;\n    border-left: 3px solid #007cba;\n    font-size: 13px;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n}\n\n.wp-image-converter-widget .options-panel {\n    background: #fff;\n    padding: 15px;\n    border-radius: 4px;\n    margin-bottom: 15px;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n}\n\n.wp-image-converter-widget .format-selector {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 15px;\n    align-items: center;\n    justify-content: center;\n}\n\n.wp-image-converter-widget .format-selector select {\n    padding: 8px 10px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    background: #fff;\n    flex: 1;\n    min-width: 100px;\n    font-size: 13px;\n}\n\n.wp-image-converter-widget .resize-options {\n    margin-top: 15px;\n}\n\n.wp-image-converter-widget .resize-options h4 {\n    font-size: 14px;\n    margin: 0 0 10px 0;\n    color: #23282d;\n    text-align: center;\n}\n\n.wp-image-converter-widget .size-inputs {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 10px;\n    justify-content: center;\n}\n\n.wp-image-converter-widget .size-input {\n    flex: 1;\n    min-width: 100px;\n}\n\n.wp-image-converter-widget .size-input label {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 500;\n    color: #555;\n    font-size: 13px;\n}\n\n.wp-image-converter-widget .size-input input {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 13px;\n}\n\n.wp-image-converter-widget .ratio-keeper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 10px;\n    font-size: 13px;\n}\n\n.wp-image-converter-widget .ratio-keeper input {\n    margin-right: 6px;\n}\n\n.wp-image-converter-widget .action-buttons {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-top: 15px;\n    justify-content: center;\n}\n\n.wp-image-converter-widget .action-btn {\n    flex: 1;\n    padding: 10px 15px;\n    border: none;\n    border-radius: 3px;\n    color: white;\n    font-weight: 500;\n    cursor: pointer;\n    text-align: center;\n    min-width: 110px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s;\n    font-size: 13px;\n}\n\n.wp-image-converter-widget .action-btn i {\n    margin-right: 6px;\n    font-size: 12px;\n}\n\n.wp-image-converter-widget .convert-btn {\n    background: #007cba;\n}\n\n.wp-image-converter-widget .convert-btn:hover {\n    background: #006ba1;\n}\n\n.wp-image-converter-widget .pdf-btn {\n    background: #dc3232;\n}\n\n.wp-image-converter-widget .pdf-btn:hover {\n    background: #c32222;\n}\n\n.wp-image-converter-widget .download-btn {\n    background: #46b450;\n    text-decoration: none;\n}\n\n.wp-image-converter-widget .download-btn:hover {\n    background: #3fa248;\n}\n\n.wp-image-converter-widget .action-btn:disabled {\n    background: #ccc;\n    cursor: not-allowed;\n}\n\n.wp-image-converter-widget .preview-area {\n    background: #fff;\n    padding: 15px;\n    border-radius: 4px;\n    margin-top: 15px;\n    text-align: center;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n    display: none;\n}\n\n.wp-image-converter-widget .preview-title {\n    font-size: 14px;\n    margin: 0 0 10px 0;\n    color: #23282d;\n}\n\n.wp-image-converter-widget .image-preview {\n    max-width: 100%;\n    height: auto;\n    border-radius: 3px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n    margin-bottom: 10px;\n    max-height: 200px;\n}\n\n.wp-image-converter-widget .notification {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    padding: 12px 16px;\n    border-radius: 3px;\n    background: #46b450;\n    color: white;\n    box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n    transform: translateX(100%);\n    transition: transform 0.3s ease-out;\n    z-index: 10000;\n    max-width: 280px;\n    font-size: 13px;\n}\n\n.wp-image-converter-widget .notification.show {\n    transform: translateX(0);\n}\n\n.wp-image-converter-widget .notification.error {\n    background: #dc3232;\n}\n\n@media (max-width: 480px) {\n    .wp-image-converter-widget .format-selector {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .wp-image-converter-widget .size-inputs {\n        flex-direction: column;\n        gap: 8px;\n    }\n    \n    .wp-image-converter-widget .action-buttons {\n        flex-direction: column;\n    }\n    \n    .wp-image-converter-widget .action-btn {\n        width: 100%;\n    }\n}\n<\/style>\n\n<div class=\"wp-image-converter-widget\">\n    <h3>Image Format Converter<\/h3>\n    <p class=\"description\">Convert, resize, and export images between different formats.<\/p>\n    \n    <div class=\"upload-area\" id=\"uploadArea\">\n        <div class=\"upload-icon\"><i class=\"fas fa-cloud-upload-alt\"><\/i><\/div>\n        <p class=\"upload-text\">Drag &#038; drop or click to select image<\/p>\n        <input type=\"file\" class=\"file-input\" id=\"fileInput\" accept=\"image\/*\">\n    <\/div>\n    \n    <div class=\"file-info\" id=\"fileInfo\">No file selected<\/div>\n    \n    <div class=\"options-panel\">\n        <div class=\"format-selector\">\n            <span>From:<\/span>\n            <select id=\"inputFormat\">\n                <option value=\"\">Auto detect<\/option>\n                <option value=\"jpg\">JPG<\/option>\n                <option value=\"png\">PNG<\/option>\n                <option value=\"jpeg\">JPEG<\/option>\n                <option value=\"webp\">WEBP<\/option>\n            <\/select>\n            \n            <span>To:<\/span>\n            <select id=\"outputFormat\">\n                <option value=\"jpg\">JPG<\/option>\n                <option value=\"png\">PNG<\/option>\n                <option value=\"webp\">WEBP<\/option>\n                <option value=\"pdf\">PDF<\/option>\n            <\/select>\n        <\/div>\n        \n        <div class=\"resize-options\">\n            <h4>Resize Options (Optional)<\/h4>\n            <div class=\"size-inputs\">\n                <div class=\"size-input\">\n                    <label for=\"width\">Width (px)<\/label>\n                    <input type=\"number\" id=\"width\" placeholder=\"Original\">\n                <\/div>\n                <div class=\"size-input\">\n                    <label for=\"height\">Height (px)<\/label>\n                    <input type=\"number\" id=\"height\" placeholder=\"Original\">\n                <\/div>\n            <\/div>\n            <div class=\"ratio-keeper\">\n                <input type=\"checkbox\" id=\"keepRatio\" checked>\n                <label for=\"keepRatio\">Maintain aspect ratio<\/label>\n            <\/div>\n        <\/div>\n        \n        <div class=\"action-buttons\">\n            <button class=\"action-btn convert-btn\" id=\"convertBtn\" disabled>\n                <i class=\"fas fa-sync-alt\"><\/i> Convert\n            <\/button>\n            <button class=\"action-btn pdf-btn\" id=\"pdfBtn\" disabled>\n                <i class=\"fas fa-file-pdf\"><\/i> To PDF\n            <\/button>\n            <a class=\"action-btn download-btn\" id=\"downloadBtn\" style=\"display: none;\">\n                <i class=\"fas fa-download\"><\/i> Download\n            <\/a>\n        <\/div>\n    <\/div>\n    \n    <div class=\"preview-area\" id=\"previewArea\">\n        <p class=\"preview-title\">Converted Image Preview:<\/p>\n        <img decoding=\"async\" class=\"image-preview\" id=\"imagePreview\" src=\"\" alt=\"Converted image\">\n    <\/div>\n<\/div>\n\n<div class=\"notification\" id=\"notification\">Image converted successfully!<\/div>\n\n<script>\n(function() {\n    \/\/ Load external dependencies dynamically\n    function loadScript(src, callback) {\n        var script = document.createElement('script');\n        script.src = src;\n        script.onload = callback;\n        document.head.appendChild(script);\n    }\n    \n    function loadCSS(href) {\n        var link = document.createElement('link');\n        link.rel = 'stylesheet';\n        link.href = href;\n        document.head.appendChild(link);\n    }\n    \n    \/\/ Check if Font Awesome is already loaded\n    if (!document.querySelector('link[href*=\"font-awesome\"]') && !document.querySelector('link[href*=\"fontawesome\"]')) {\n        loadCSS('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css');\n    }\n    \n    \/\/ Initialize the widget after dependencies are loaded\n    function initWidget() {\n        const uploadArea = document.getElementById('uploadArea');\n        const fileInput = document.getElementById('fileInput');\n        const fileInfo = document.getElementById('fileInfo');\n        const inputFormat = document.getElementById('inputFormat');\n        const outputFormat = document.getElementById('outputFormat');\n        const convertBtn = document.getElementById('convertBtn');\n        const pdfBtn = document.getElementById('pdfBtn');\n        const downloadBtn = document.getElementById('downloadBtn');\n        const previewArea = document.getElementById('previewArea');\n        const imagePreview = document.getElementById('imagePreview');\n        const notification = document.getElementById('notification');\n        const widthInput = document.getElementById('width');\n        const heightInput = document.getElementById('height');\n        const keepRatioCheckbox = document.getElementById('keepRatio');\n        \n        let currentFile = null;\n        let originalWidth = 0;\n        let originalHeight = 0;\n        let aspectRatio = 0;\n        \n        \/\/ Upload area functionality\n        uploadArea.addEventListener('click', () => {\n            fileInput.click();\n        });\n        \n        uploadArea.addEventListener('dragover', (e) => {\n            e.preventDefault();\n            uploadArea.classList.add('dragover');\n        });\n        \n        uploadArea.addEventListener('dragleave', () => {\n            uploadArea.classList.remove('dragover');\n        });\n        \n        uploadArea.addEventListener('drop', (e) => {\n            e.preventDefault();\n            uploadArea.classList.remove('dragover');\n            \n            if (e.dataTransfer.files.length) {\n                handleFile(e.dataTransfer.files[0]);\n            }\n        });\n        \n        fileInput.addEventListener('change', () => {\n            if (fileInput.files.length) {\n                handleFile(fileInput.files[0]);\n            }\n        });\n        \n        \/\/ Width and height input handlers for aspect ratio\n        widthInput.addEventListener('input', () => {\n            if (keepRatioCheckbox.checked && aspectRatio && widthInput.value) {\n                heightInput.value = Math.round(widthInput.value \/ aspectRatio);\n            }\n        });\n        \n        heightInput.addEventListener('input', () => {\n            if (keepRatioCheckbox.checked && aspectRatio && heightInput.value) {\n                widthInput.value = Math.round(heightInput.value * aspectRatio);\n            }\n        });\n        \n        \/\/ Convert button functionality\n        convertBtn.addEventListener('click', convertImage);\n        \n        \/\/ PDF button functionality\n        pdfBtn.addEventListener('click', convertToPdf);\n        \n        function handleFile(file) {\n            if (!file.type.match('image.*')) {\n                showNotification('Please select an image file', 'error');\n                return;\n            }\n            \n            currentFile = file;\n            const fileName = file.name;\n            const fileExtension = fileName.split('.').pop().toLowerCase();\n            \n            fileInfo.textContent = `Selected: ${fileName} (${formatBytes(file.size)})`;\n            \n            \/\/ Set input format if it matches our options\n            if (['jpg', 'jpeg', 'png', 'webp'].includes(fileExtension)) {\n                inputFormat.value = fileExtension === 'jpeg' ? 'jpg' : fileExtension;\n            } else {\n                inputFormat.value = '';\n            }\n            \n            \/\/ Load image to get dimensions\n            const reader = new FileReader();\n            reader.onload = function(e) {\n                const img = new Image();\n                img.onload = function() {\n                    originalWidth = img.width;\n                    originalHeight = img.height;\n                    aspectRatio = originalWidth \/ originalHeight;\n                    \n                    widthInput.placeholder = originalWidth;\n                    heightInput.placeholder = originalHeight;\n                };\n                img.src = e.target.result;\n            };\n            reader.readAsDataURL(file);\n            \n            convertBtn.disabled = false;\n            pdfBtn.disabled = false;\n            previewArea.style.display = 'none';\n            downloadBtn.style.display = 'none';\n        }\n        \n        function convertImage() {\n            if (!currentFile) return;\n            \n            const reader = new FileReader();\n            \n            reader.onload = function(e) {\n                const img = new Image();\n                img.onload = function() {\n                    const canvas = document.createElement('canvas');\n                    const ctx = canvas.getContext('2d');\n                    \n                    \/\/ Get dimensions (use custom or original)\n                    let newWidth = widthInput.value ? parseInt(widthInput.value) : originalWidth;\n                    let newHeight = heightInput.value ? parseInt(heightInput.value) : originalHeight;\n                    \n                    \/\/ Validate dimensions\n                    if (newWidth <= 0) newWidth = originalWidth;\n                    if (newHeight <= 0) newHeight = originalHeight;\n                    \n                    canvas.width = newWidth;\n                    canvas.height = newHeight;\n                    \n                    \/\/ Draw image with new dimensions\n                    ctx.drawImage(img, 0, 0, newWidth, newHeight);\n                    \n                    let outputMimeType;\n                    switch(outputFormat.value) {\n                        case 'jpg':\n                            outputMimeType = 'image\/jpeg';\n                            break;\n                        case 'png':\n                            outputMimeType = 'image\/png';\n                            break;\n                        case 'webp':\n                            outputMimeType = 'image\/webp';\n                            break;\n                        default:\n                            outputMimeType = 'image\/jpeg';\n                    }\n                    \n                    const dataURL = canvas.toDataURL(outputMimeType, 0.9);\n                    \n                    \/\/ Display the converted image\n                    imagePreview.src = dataURL;\n                    previewArea.style.display = 'block';\n                    \n                    \/\/ Set up download link\n                    const newFileName = currentFile.name.split('.')[0] + '.' + outputFormat.value;\n                    downloadBtn.href = dataURL;\n                    downloadBtn.download = newFileName;\n                    downloadBtn.style.display = 'flex';\n                    \n                    showNotification('Image converted successfully!');\n                };\n                img.src = e.target.result;\n            };\n            \n            reader.readAsDataURL(currentFile);\n        }\n        \n        function convertToPdf() {\n            if (!currentFile) return;\n            \n            \/\/ Check if jsPDF is available\n            if (typeof window.jspdf === 'undefined') {\n                showNotification('Loading PDF converter...', 'error');\n                \n                \/\/ Load jsPDF dynamically\n                loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js', function() {\n                    loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js', function() {\n                        \/\/ Retry conversion after loading\n                        convertToPdf();\n                    });\n                });\n                return;\n            }\n            \n            const { jsPDF } = window.jspdf;\n            \n            const reader = new FileReader();\n            \n            reader.onload = function(e) {\n                const img = new Image();\n                img.onload = function() {\n                    \/\/ Get dimensions (use custom or original)\n                    let newWidth = widthInput.value ? parseInt(widthInput.value) : originalWidth;\n                    let newHeight = heightInput.value ? parseInt(heightInput.value) : originalHeight;\n                    \n                    \/\/ Validate dimensions\n                    if (newWidth <= 0) newWidth = originalWidth;\n                    if (newHeight <= 0) newHeight = originalHeight;\n                    \n                    \/\/ Create a temporary canvas to get image data\n                    const canvas = document.createElement('canvas');\n                    const ctx = canvas.getContext('2d');\n                    canvas.width = newWidth;\n                    canvas.height = newHeight;\n                    ctx.drawImage(img, 0, 0, newWidth, newHeight);\n                    \n                    const imgData = canvas.toDataURL('image\/jpeg', 0.9);\n                    \n                    \/\/ Create PDF\n                    const pdf = new jsPDF({\n                        orientation: newWidth > newHeight ? 'landscape' : 'portrait',\n                        unit: 'px',\n                        format: [newWidth, newHeight]\n                    });\n                    \n                    pdf.addImage(imgData, 'JPEG', 0, 0, newWidth, newHeight);\n                    \n                    \/\/ Download the PDF\n                    const pdfFileName = currentFile.name.split('.')[0] + '.pdf';\n                    pdf.save(pdfFileName);\n                    \n                    showNotification('PDF created successfully!');\n                };\n                img.src = e.target.result;\n            };\n            \n            reader.readAsDataURL(currentFile);\n        }\n        \n        function showNotification(message, type = 'success') {\n            notification.textContent = message;\n            if (type === 'error') {\n                notification.classList.add('error');\n            } else {\n                notification.classList.remove('error');\n            }\n            notification.classList.add('show');\n            \n            setTimeout(() => {\n                notification.classList.remove('show');\n            }, 3000);\n        }\n        \n        function formatBytes(bytes, decimals = 2) {\n            if (bytes === 0) return '0 Bytes';\n            \n            const k = 1024;\n            const dm = decimals < 0 ? 0 : decimals;\n            const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n            \n            const i = Math.floor(Math.log(bytes) \/ Math.log(k));\n            \n            return parseFloat((bytes \/ Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];\n        }\n    }\n    \n    \/\/ Initialize the widget when the page loads\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initWidget);\n    } else {\n        initWidget();\n    }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Image Format Converter Convert, resize, and export images between different formats. Drag &#038; drop or click to select image No file selected From: Auto detectJPGPNGJPEGWEBP To: JPGPNGWEBPPDF Resize Options (Optional) Width (px) Height (px) Maintain aspect ratio Convert To PDF Download Converted Image Preview: Image converted successfully!<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-628","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":1,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/628\/revisions"}],"predecessor-version":[{"id":630,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/628\/revisions\/630"}],"wp:attachment":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/media?parent=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}