{"id":1956,"date":"2025-03-01T13:34:22","date_gmt":"2025-03-01T13:34:22","guid":{"rendered":"https:\/\/sbassandaur.com\/?page_id=1956"},"modified":"2025-03-26T15:35:14","modified_gmt":"2025-03-26T15:35:14","slug":"image-tools","status":"publish","type":"page","link":"https:\/\/sbassandaur.com\/pa\/image-tools\/","title":{"rendered":"Image Tools"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1956\" class=\"elementor elementor-1956\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3b5034 e-grid e-con-boxed e-con e-parent\" data-id=\"e3b5034\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76ddec9 e-n-tabs-mobile elementor-widget elementor-widget-n-tabs\" data-id=\"76ddec9\" data-element_type=\"widget\" data-settings=\"{&quot;horizontal_scroll&quot;:&quot;disable&quot;}\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"124\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t\t\t<button id=\"e-n-tabs-title-1241\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-1241\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tAll in One Image Tools\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1242\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1242\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tImage Background Remover\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1243\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1243\" style=\"--n-tabs-title-order: 3;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tImage Rotation Tool\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1244\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1244\" style=\"--n-tabs-title-order: 4;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tImage Compression Tool\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1245\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1245\" style=\"--n-tabs-title-order: 5;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tPDF to Image Convertor\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1246\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1246\" style=\"--n-tabs-title-order: 6;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tFlip Image Tool\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1247\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"7\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1247\" style=\"--n-tabs-title-order: 7;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tCheck Image Info\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1248\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"8\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1248\" style=\"--n-tabs-title-order: 8;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tColor Changer\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-1249\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"9\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-1249\" style=\"--n-tabs-title-order: 9;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tApply Filter\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-12410\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"10\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-12410\" style=\"--n-tabs-title-order: 10;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tImage Resizer\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-12411\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"11\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-12411\" style=\"--n-tabs-title-order: 11;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tBulk Image Resizer\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-12412\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"12\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-12412\" style=\"--n-tabs-title-order: 12;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tCrop Image\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-12413\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"13\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-12413\" style=\"--n-tabs-title-order: 13;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tImages to PDF\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-12414\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"14\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-12414\" style=\"--n-tabs-title-order: 14;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tImage Resizer based on Size\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<button id=\"e-n-tabs-title-12415\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"15\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-12415\" style=\"--n-tabs-title-order: 15;\">\n\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\tBulk Image Resizer based on Size\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-1241\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1241\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-fd854da e-con-full e-flex e-con e-child\" data-id=\"fd854da\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c07e7a4 elementor-widget elementor-widget-html\" data-id=\"c07e7a4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Tools<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview1 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        .loading-spinner1 {\r\n            display: none;\r\n            margin-top: 20px;\r\n        }\r\n        .size-indicator1, .rotation-label1, .compression-label1, .resize-label1 {\r\n            margin-top: 10px;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Tools<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload1\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload1\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview1\" src=\"#\" alt=\"Image Preview\" class=\"image-preview1\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Size Indicator -->\r\n        <div id=\"sizeIndicator1\" class=\"size-indicator1 text-center\"><\/div>\r\n\r\n        <!-- Tools Section -->\r\n        <div class=\"row mt-4\">\r\n            <!-- Background Removal -->\r\n            <div class=\"col-md-3\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-body\">\r\n                        <h5 class=\"card-title\">Background Removal<\/h5>\r\n                        <button class=\"btn btn-primary w-100\" onclick=\"removeBackground1()\">Remove Background<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Image Rotation -->\r\n            <div class=\"col-md-3\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-body\">\r\n                        <h5 class=\"card-title\">Image Rotation<\/h5>\r\n                        <label for=\"rotationRange1\" class=\"form-label\">Rotation: <span id=\"rotationLabel1\">0\u00b0<\/span><\/label>\r\n                        <input type=\"range\" class=\"form-range\" id=\"rotationRange1\" min=\"0\" max=\"360\" step=\"1\" value=\"0\">\r\n                        <button class=\"btn btn-primary w-100\" onclick=\"rotateImage1()\">Apply Rotation<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Image Compression -->\r\n            <div class=\"col-md-3\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-body\">\r\n                        <h5 class=\"card-title\">Image Compression<\/h5>\r\n                        <label for=\"compressionRange1\" class=\"form-label\">Compression: <span id=\"compressionLabel1\">100%<\/span><\/label>\r\n                        <input type=\"range\" class=\"form-range\" id=\"compressionRange1\" min=\"0.1\" max=\"1\" step=\"0.1\" value=\"1\">\r\n                        <button class=\"btn btn-primary w-100\" onclick=\"compressImage1()\">Compress Image<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Image Resize -->\r\n            <div class=\"col-md-3\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-body\">\r\n                        <h5 class=\"card-title\">Image Resize<\/h5>\r\n                        <label for=\"resizeWidth1\" class=\"form-label\">Width (px):<\/label>\r\n                        <input type=\"number\" class=\"form-control mb-2\" id=\"resizeWidth1\" placeholder=\"Width\">\r\n                        <label for=\"resizeHeight1\" class=\"form-label\">Height (px):<\/label>\r\n                        <input type=\"number\" class=\"form-control mb-2\" id=\"resizeHeight1\" placeholder=\"Height\">\r\n                        <button class=\"btn btn-primary w-100\" onclick=\"resizeImage1()\">Resize Image<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Loading Spinner -->\r\n        <div class=\"text-center loading-spinner1\" id=\"loadingSpinner1\">\r\n            <div class=\"spinner-border text-primary\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...<\/span>\r\n            <\/div>\r\n            <p class=\"mt-2\">Processing...<\/p>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn1\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage1()\">Download Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- BackgroundRemoval.js -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@imgly\/background-removal@1.0.0\/dist\/bundle.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement1 = document.getElementById('imagePreview1');\r\n        let uploadedImage1 = null;\r\n        let originalSize1 = 0;\r\n        let rotationDegrees1 = 0;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload1').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement1.src = e.target.result;\r\n                    imageElement1.style.display = 'block';\r\n                    uploadedImage1 = imageElement1;\r\n                    originalSize1 = file.size;\r\n                    updateSizeIndicator1(originalSize1, originalSize1);\r\n                    document.getElementById('downloadBtn1').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Background Removal\r\n        async function removeBackground1() {\r\n            const file = document.getElementById('imageUpload1').files[0];\r\n            if (!file) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Show loading spinner\r\n            document.getElementById('loadingSpinner1').style.display = 'block';\r\n\r\n            try {\r\n                \/\/ Initialize the background remover\r\n                const backgroundRemover = await new backgroundRemoval.BackgroundRemoval();\r\n                const imageBlob = await backgroundRemover.removeBackground(file);\r\n\r\n                \/\/ Display the result\r\n                const imageUrl = URL.createObjectURL(imageBlob);\r\n                imageElement1.src = imageUrl;\r\n                document.getElementById('downloadBtn1').style.display = 'block';\r\n            } catch (error) {\r\n                console.error(\"Error removing background:\", error);\r\n                alert(\"Failed to remove background. Please try again or use a smaller image.\");\r\n            } finally {\r\n                \/\/ Hide loading spinner\r\n                document.getElementById('loadingSpinner1').style.display = 'none';\r\n            }\r\n        }\r\n\r\n        \/\/ Image Rotation\r\n        function rotateImage1() {\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n\r\n            \/\/ Calculate new canvas size to fit rotated image\r\n            const radians = (rotationDegrees1 * Math.PI) \/ 180;\r\n            const sin = Math.abs(Math.sin(radians));\r\n            const cos = Math.abs(Math.cos(radians));\r\n            const newWidth = imageElement1.naturalWidth * cos + imageElement1.naturalHeight * sin;\r\n            const newHeight = imageElement1.naturalWidth * sin + imageElement1.naturalHeight * cos;\r\n\r\n            canvas.width = newWidth;\r\n            canvas.height = newHeight;\r\n\r\n            \/\/ Rotate and draw image\r\n            ctx.translate(canvas.width \/ 2, canvas.height \/ 2);\r\n            ctx.rotate((rotationDegrees1 * Math.PI) \/ 180);\r\n            ctx.drawImage(imageElement1, -imageElement1.naturalWidth \/ 2, -imageElement1.naturalHeight \/ 2);\r\n\r\n            \/\/ Update image preview\r\n            imageElement1.src = canvas.toDataURL();\r\n            document.getElementById('downloadBtn1').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Image Compression\r\n        function compressImage1() {\r\n            const quality = document.getElementById('compressionRange1').value;\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = imageElement1.naturalWidth;\r\n            canvas.height = imageElement1.naturalHeight;\r\n            ctx.drawImage(imageElement1, 0, 0);\r\n\r\n            canvas.toBlob(function(blob) {\r\n                const compressedImageUrl = URL.createObjectURL(blob);\r\n                imageElement1.src = compressedImageUrl;\r\n                updateSizeIndicator1(originalSize1, blob.size);\r\n                document.getElementById('downloadBtn1').style.display = 'block';\r\n            }, 'image\/jpeg', quality);\r\n        }\r\n\r\n        \/\/ Image Resize\r\n        function resizeImage1() {\r\n            const width = parseInt(document.getElementById('resizeWidth1').value);\r\n            const height = parseInt(document.getElementById('resizeHeight1').value);\r\n\r\n            if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {\r\n                alert(\"Please enter valid width and height values.\");\r\n                return;\r\n            }\r\n\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = width;\r\n            canvas.height = height;\r\n\r\n            \/\/ Draw the resized image\r\n            ctx.drawImage(imageElement1, 0, 0, width, height);\r\n\r\n            \/\/ Update image preview\r\n            imageElement1.src = canvas.toDataURL();\r\n            document.getElementById('downloadBtn1').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Update Size Indicator\r\n        function updateSizeIndicator1(originalSize, compressedSize) {\r\n            const sizeIndicator1 = document.getElementById('sizeIndicator1');\r\n            const originalSizeMB = (originalSize \/ 1024 \/ 1024).toFixed(2);\r\n            const compressedSizeMB = (compressedSize \/ 1024 \/ 1024).toFixed(2);\r\n            sizeIndicator1.textContent = `Original Size: ${originalSizeMB} MB | Compressed Size: ${compressedSizeMB} MB`;\r\n        }\r\n\r\n        \/\/ Rotation Range Label\r\n        document.getElementById('rotationRange1').addEventListener('input', function() {\r\n            rotationDegrees1 = this.value;\r\n            document.getElementById('rotationLabel1').textContent = `${rotationDegrees1}\u00b0`;\r\n        });\r\n\r\n        \/\/ Compression Range Label\r\n        document.getElementById('compressionRange1').addEventListener('input', function() {\r\n            const compressionValue = Math.round(this.value * 100);\r\n            document.getElementById('compressionLabel1').textContent = `${compressionValue}%`;\r\n        });\r\n\r\n        \/\/ Download Image\r\n        function downloadImage1() {\r\n            const link = document.createElement('a');\r\n            link.href = imageElement1.src;\r\n            link.download = 'processed_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1242\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1242\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\"elementor-element elementor-element-cc003c8 e-con-full e-flex e-con e-child\" data-id=\"cc003c8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66c29ae elementor-widget elementor-widget-html\" data-id=\"66c29ae\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<!--<meta charset=\"UTF-8\"> -->\r\n<!-- <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> -->\r\n    <title>Image Background Remover<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview2 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .loading-spinner2 {\r\n            display: none;\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Background Remover<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload2\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload2\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview2\" src=\"#\" alt=\"Image Preview\" class=\"image-preview2\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Loading Spinner -->\r\n        <div class=\"text-center loading-spinner2\" id=\"loadingSpinner2\">\r\n            <div class=\"spinner-border text-primary\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...<\/span>\r\n            <\/div>\r\n            <p class=\"mt-2\">Removing background...<\/p>\r\n        <\/div>\r\n\r\n        <!-- Remove Background Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"removeBgBtn2\" class=\"btn btn-primary\" style=\"display: none;\" onclick=\"removeBackground2()\">Remove Background<\/button>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn2\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage2()\">Download Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement2 = document.getElementById('imagePreview2');\r\n        let uploadedImage2 = null;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload2').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement2.src = e.target.result;\r\n                    imageElement2.style.display = 'block';\r\n                    uploadedImage2 = imageElement2;\r\n                    document.getElementById('removeBgBtn2').style.display = 'block';\r\n                    document.getElementById('downloadBtn2').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Remove Background\r\n        async function removeBackground2() {\r\n            const file = document.getElementById('imageUpload2').files[0];\r\n            if (!file) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Show loading spinner\r\n            document.getElementById('loadingSpinner2').style.display = 'block';\r\n            document.getElementById('removeBgBtn2').style.display = 'none';\r\n\r\n            \/\/ Prepare form data\r\n            const formData = new FormData();\r\n            formData.append('image_file', file);\r\n\r\n            \/\/ Call Remove.bg API\r\n            try {\r\n                const response = await fetch('https:\/\/api.remove.bg\/v1.0\/removebg', {\r\n                    method: 'POST',\r\n                    headers: {\r\n                        'X-Api-Key': 'HmtxWkrzNcgAVvn4crfd66rY', \/\/ Replace with your API key\r\n                    },\r\n                    body: formData,\r\n                });\r\n\r\n                if (!response.ok) {\r\n                    throw new Error(`Error: ${response.statusText}`);\r\n                }\r\n\r\n                const blob = await response.blob();\r\n                const imageUrl = URL.createObjectURL(blob);\r\n                imageElement2.src = imageUrl;\r\n                document.getElementById('downloadBtn2').style.display = 'block';\r\n            } catch (error) {\r\n                console.error(\"Error removing background:\", error);\r\n                alert(\"Failed to remove background. Please try again.\");\r\n            } finally {\r\n                \/\/ Hide loading spinner\r\n                document.getElementById('loadingSpinner2').style.display = 'none';\r\n                document.getElementById('removeBgBtn2').style.display = 'block';\r\n            }\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage2() {\r\n            const link = document.createElement('a');\r\n            link.href = imageElement2.src;\r\n            link.download = 'background_removed_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1243\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1243\" data-tab-index=\"3\" style=\"--n-tabs-title-order: 3;\" class=\"elementor-element elementor-element-ee5147b e-con-full e-flex e-con e-child\" data-id=\"ee5147b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72e3e76 elementor-widget elementor-widget-html\" data-id=\"72e3e76\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Rotation Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview3 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        .rotation-label3 {\r\n            margin-top: 10px;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Rotation Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload3\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload3\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview3\" src=\"#\" alt=\"Image Preview\" class=\"image-preview3\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Rotation Controls -->\r\n        <div class=\"row mt-4\">\r\n            <div class=\"col-md-6 offset-md-3\">\r\n                <label for=\"rotationRange3\" class=\"form-label\">Rotation: <span id=\"rotationLabel3\">0\u00b0<\/span><\/label>\r\n                <input type=\"range\" class=\"form-range\" id=\"rotationRange3\" min=\"0\" max=\"360\" step=\"1\" value=\"0\">\r\n                <button class=\"btn btn-primary w-100\" onclick=\"rotateImage3()\">Apply Rotation<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn3\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage3()\">Download Rotated Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement3 = document.getElementById('imagePreview3');\r\n        let uploadedImage3 = null;\r\n        let rotationDegrees3 = 0;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload3').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement3.src = e.target.result;\r\n                    imageElement3.style.display = 'block';\r\n                    uploadedImage3 = imageElement3;\r\n                    document.getElementById('downloadBtn3').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Rotation Range Label\r\n        document.getElementById('rotationRange3').addEventListener('input', function() {\r\n            rotationDegrees3 = this.value;\r\n            document.getElementById('rotationLabel3').textContent = `${rotationDegrees3}\u00b0`;\r\n        });\r\n\r\n        \/\/ Image Rotation\r\n        function rotateImage3() {\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n\r\n            \/\/ Calculate new canvas size to fit rotated image\r\n            const radians = (rotationDegrees3 * Math.PI) \/ 180;\r\n            const sin = Math.abs(Math.sin(radians));\r\n            const cos = Math.abs(Math.cos(radians));\r\n            const newWidth = imageElement3.naturalWidth * cos + imageElement3.naturalHeight * sin;\r\n            const newHeight = imageElement3.naturalWidth * sin + imageElement3.naturalHeight * cos;\r\n\r\n            canvas.width = newWidth;\r\n            canvas.height = newHeight;\r\n\r\n            \/\/ Rotate and draw image\r\n            ctx.translate(canvas.width \/ 2, canvas.height \/ 2);\r\n            ctx.rotate((rotationDegrees3 * Math.PI) \/ 180);\r\n            ctx.drawImage(imageElement3, -imageElement3.naturalWidth \/ 2, -imageElement3.naturalHeight \/ 2);\r\n\r\n            \/\/ Update image preview\r\n            imageElement3.src = canvas.toDataURL();\r\n            document.getElementById('downloadBtn3').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage3() {\r\n            const link = document.createElement('a');\r\n            link.href = imageElement3.src;\r\n            link.download = 'rotated_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1244\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1244\" data-tab-index=\"4\" style=\"--n-tabs-title-order: 4;\" class=\"elementor-element elementor-element-0260ff6 e-flex e-con-boxed e-con e-child\" data-id=\"0260ff6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4afacf6 elementor-widget elementor-widget-html\" data-id=\"4afacf6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Compression Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview4 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .size-indicator4 {\r\n            margin-top: 10px;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Compression Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload4\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload4\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview4\" src=\"#\" alt=\"Image Preview\" class=\"image-preview4\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Size Indicator -->\r\n        <div id=\"sizeIndicator4\" class=\"size-indicator4 text-center\"><\/div>\r\n\r\n        <!-- Compression Controls -->\r\n        <div class=\"row mt-4\">\r\n            <div class=\"col-md-6 offset-md-3\">\r\n                <label for=\"compressionRange4\" class=\"form-label\">Compression Level: <span id=\"compressionLabel4\">100%<\/span><\/label>\r\n                <input type=\"range\" class=\"form-range\" id=\"compressionRange4\" min=\"0.1\" max=\"1\" step=\"0.1\" value=\"1\">\r\n                <button class=\"btn btn-primary w-100\" onclick=\"compressImage4()\">Compress Image<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn4\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage4()\">Download Compressed Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement4 = document.getElementById('imagePreview4');\r\n        let uploadedImage4 = null;\r\n        let originalSize4 = 0;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload4').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement4.src = e.target.result;\r\n                    imageElement4.style.display = 'block';\r\n                    uploadedImage4 = imageElement4;\r\n                    originalSize4 = file.size;\r\n                    updateSizeIndicator4(originalSize4, originalSize4);\r\n                    document.getElementById('downloadBtn4').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Compression Range Label\r\n        document.getElementById('compressionRange4').addEventListener('input', function() {\r\n            const compressionValue = Math.round(this.value * 100);\r\n            document.getElementById('compressionLabel4').textContent = `${compressionValue}%`;\r\n        });\r\n\r\n        \/\/ Image Compression\r\n        function compressImage4() {\r\n            const quality = document.getElementById('compressionRange4').value;\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = imageElement4.naturalWidth;\r\n            canvas.height = imageElement4.naturalHeight;\r\n            ctx.drawImage(imageElement4, 0, 0);\r\n\r\n            canvas.toBlob(function(blob) {\r\n                const compressedImageUrl = URL.createObjectURL(blob);\r\n                imageElement4.src = compressedImageUrl;\r\n                updateSizeIndicator4(originalSize4, blob.size);\r\n                document.getElementById('downloadBtn4').style.display = 'block';\r\n            }, 'image\/jpeg', quality);\r\n        }\r\n\r\n        \/\/ Update Size Indicator\r\n        function updateSizeIndicator4(originalSize, compressedSize) {\r\n            const sizeIndicator4 = document.getElementById('sizeIndicator4');\r\n            const originalSizeMB = (originalSize \/ 1024 \/ 1024).toFixed(2);\r\n            const compressedSizeMB = (compressedSize \/ 1024 \/ 1024).toFixed(2);\r\n            sizeIndicator4.textContent = `Original Size: ${originalSizeMB} MB | Compressed Size: ${compressedSizeMB} MB`;\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage4() {\r\n            const link = document.createElement('a');\r\n            link.href = imageElement4.src;\r\n            link.download = 'compressed_image.jpg';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1245\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1245\" data-tab-index=\"5\" style=\"--n-tabs-title-order: 5;\" class=\"elementor-element elementor-element-237518d e-flex e-con-boxed e-con e-child\" data-id=\"237518d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b59b715 elementor-widget elementor-widget-html\" data-id=\"b59b715\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>PDF to Image Converter<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .pdf-preview5 {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            margin-top: 20px;\r\n            border: 1px solid #ddd;\r\n            padding: 10px;\r\n        }\r\n        .image-preview5 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .loading-spinner5 {\r\n            display: none;\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">PDF to Image Converter<\/h1>\r\n\r\n        <!-- PDF Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"pdfUpload5\" class=\"form-label\">Upload PDF<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"pdfUpload5\" accept=\"application\/pdf\">\r\n        <\/div>\r\n\r\n        <!-- PDF Preview Section -->\r\n        <div class=\"text-center\">\r\n            <iframe id=\"pdfPreview5\" class=\"pdf-preview5\" style=\"display: none;\"><\/iframe>\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\" id=\"imagePreviews5\"><\/div>\r\n\r\n        <!-- Loading Spinner -->\r\n        <div class=\"text-center loading-spinner5\" id=\"loadingSpinner5\">\r\n            <div class=\"spinner-border text-primary\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...<\/span>\r\n            <\/div>\r\n            <p class=\"mt-2\">Processing...<\/p>\r\n        <\/div>\r\n\r\n        <!-- Convert Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"convertBtn5\" class=\"btn btn-primary\" style=\"display: none;\" onclick=\"convertPdfToImage5()\">Convert PDF to Image<\/button>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn5\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadAllImages5()\">Download All Images<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- pdfjs-dist library -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let pdfPreview5 = document.getElementById('pdfPreview5');\r\n        let uploadedPdf5 = null;\r\n        let pdfFileName5 = ''; \/\/ Store the PDF file name\r\n        let imageUrls5 = []; \/\/ Store image URLs for all pages\r\n\r\n        \/\/ PDF Upload\r\n        document.getElementById('pdfUpload5').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    pdfPreview5.src = e.target.result;\r\n                    pdfPreview5.style.display = 'block';\r\n                    uploadedPdf5 = file;\r\n                    pdfFileName5 = file.name.replace('.pdf', ''); \/\/ Extract file name without extension\r\n                    document.getElementById('convertBtn5').style.display = 'block';\r\n                    document.getElementById('downloadBtn5').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Convert PDF to Images\r\n        async function convertPdfToImage5() {\r\n            const file = document.getElementById('pdfUpload5').files[0];\r\n            if (!file) {\r\n                alert(\"Please upload a PDF file first.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Show loading spinner\r\n            document.getElementById('loadingSpinner5').style.display = 'block';\r\n            document.getElementById('imagePreviews5').innerHTML = ''; \/\/ Clear previous previews\r\n            imageUrls5 = []; \/\/ Clear previous image URLs\r\n\r\n            try {\r\n                \/\/ Load the PDF file\r\n                const arrayBuffer = await file.arrayBuffer();\r\n                const pdfData = new Uint8Array(arrayBuffer);\r\n\r\n                \/\/ Initialize PDF.js\r\n                const loadingTask = pdfjsLib.getDocument({ data: pdfData });\r\n                const pdfDoc = await loadingTask.promise;\r\n\r\n                \/\/ Render all pages\r\n                for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {\r\n                    const page = await pdfDoc.getPage(pageNum);\r\n                    const viewport = page.getViewport({ scale: 1.5 });\r\n                    const canvas = document.createElement('canvas');\r\n                    const context = canvas.getContext('2d');\r\n                    canvas.height = viewport.height;\r\n                    canvas.width = viewport.width;\r\n\r\n                    \/\/ Render the PDF page onto the canvas\r\n                    const renderContext = {\r\n                        canvasContext: context,\r\n                        viewport: viewport,\r\n                    };\r\n                    await page.render(renderContext).promise;\r\n\r\n                    \/\/ Convert the canvas to an image\r\n                    const imageUrl = canvas.toDataURL('image\/png');\r\n                    imageUrls5.push({ url: imageUrl, pageNum });\r\n\r\n                    \/\/ Display the image preview\r\n                    const imageContainer = document.createElement('div');\r\n                    imageContainer.innerHTML = `\r\n                        <img decoding=\"async\" src=\"${imageUrl}\" alt=\"Page ${pageNum}\" class=\"image-preview5\">\r\n                        <p class=\"mt-2\">Page ${pageNum}<\/p>\r\n                    `;\r\n                    document.getElementById('imagePreviews5').appendChild(imageContainer);\r\n                }\r\n\r\n                \/\/ Show download button\r\n                document.getElementById('downloadBtn5').style.display = 'block';\r\n            } catch (error) {\r\n                console.error(\"Error converting PDF to image:\", error);\r\n                alert(\"Failed to convert PDF to image. Please try again.\");\r\n            } finally {\r\n                \/\/ Hide loading spinner\r\n                document.getElementById('loadingSpinner5').style.display = 'none';\r\n            }\r\n        }\r\n\r\n        \/\/ Download All Images\r\n        function downloadAllImages5() {\r\n            if (imageUrls5.length === 0) {\r\n                alert(\"No images available to download.\");\r\n                return;\r\n            }\r\n\r\n            imageUrls5.forEach((image) => {\r\n                const link = document.createElement('a');\r\n                link.href = image.url;\r\n                link.download = `${pdfFileName5}_page_${image.pageNum}.png`; \/\/ Use PDF name and page number\r\n                link.click();\r\n            });\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1246\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1246\" data-tab-index=\"6\" style=\"--n-tabs-title-order: 6;\" class=\"elementor-element elementor-element-490b0d2 e-flex e-con-boxed e-con e-child\" data-id=\"490b0d2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d22763 elementor-widget elementor-widget-html\" data-id=\"3d22763\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Flipping Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview6 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        .flip-controls6 {\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Flipping Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload6\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload6\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview6\" src=\"#\" alt=\"Image Preview\" class=\"image-preview6\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Flip Controls -->\r\n        <div class=\"row flip-controls6\">\r\n            <div class=\"col-md-6 offset-md-3 text-center\">\r\n                <button class=\"btn btn-primary\" onclick=\"flipHorizontal6()\">Flip Horizontal<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"flipVertical6()\">Flip Vertical<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn6\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage6()\">Download Flipped Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement6 = document.getElementById('imagePreview6');\r\n        let uploadedImage6 = null;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload6').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement6.src = e.target.result;\r\n                    imageElement6.style.display = 'block';\r\n                    uploadedImage6 = imageElement6;\r\n                    document.getElementById('downloadBtn6').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Flip Image Horizontally\r\n        function flipHorizontal6() {\r\n            if (!uploadedImage6) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = imageElement6.naturalWidth;\r\n            canvas.height = imageElement6.naturalHeight;\r\n\r\n            \/\/ Flip horizontally\r\n            ctx.translate(canvas.width, 0);\r\n            ctx.scale(-1, 1);\r\n            ctx.drawImage(imageElement6, 0, 0);\r\n\r\n            \/\/ Update image preview\r\n            imageElement6.src = canvas.toDataURL();\r\n            document.getElementById('downloadBtn6').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Flip Image Vertically\r\n        function flipVertical6() {\r\n            if (!uploadedImage6) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = imageElement6.naturalWidth;\r\n            canvas.height = imageElement6.naturalHeight;\r\n\r\n            \/\/ Flip vertically\r\n            ctx.translate(0, canvas.height);\r\n            ctx.scale(1, -1);\r\n            ctx.drawImage(imageElement6, 0, 0);\r\n\r\n            \/\/ Update image preview\r\n            imageElement6.src = canvas.toDataURL();\r\n            document.getElementById('downloadBtn6').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage6() {\r\n            const link = document.createElement('a');\r\n            link.href = imageElement6.src;\r\n            link.download = 'flipped_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1247\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1247\" data-tab-index=\"7\" style=\"--n-tabs-title-order: 7;\" class=\"elementor-element elementor-element-86f02be e-flex e-con-boxed e-con e-child\" data-id=\"86f02be\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db72eed elementor-widget elementor-widget-html\" data-id=\"db72eed\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Information Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview7 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .image-info7 {\r\n            margin-top: 20px;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Information Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload7\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload7\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview7\" src=\"#\" alt=\"Image Preview\" class=\"image-preview7\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Image Information Section -->\r\n        <div id=\"imageInfo7\" class=\"image-info7 text-center\">\r\n            <p>File Size: <span id=\"fileSize7\">-<\/span><\/p>\r\n            <p>Pixel Size: <span id=\"pixelSize7\">-<\/span><\/p>\r\n            <p>DPI: <span id=\"dpi7\">-<\/span><\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement7 = document.getElementById('imagePreview7');\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload7').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement7.src = e.target.result;\r\n                    imageElement7.style.display = 'block';\r\n\r\n                    \/\/ Display file size\r\n                    const fileSize7 = (file.size \/ 1024).toFixed(2); \/\/ Convert to KB\r\n                    document.getElementById('fileSize7').textContent = `${fileSize7} KB`;\r\n\r\n                    \/\/ Get image dimensions and DPI\r\n                    imageElement7.onload = function() {\r\n                        const pixelSize7 = `${imageElement7.naturalWidth} x ${imageElement7.naturalHeight}`;\r\n                        document.getElementById('pixelSize7').textContent = pixelSize7;\r\n\r\n                        \/\/ Calculate DPI (assuming 96 DPI for web images)\r\n                        const dpi7 = 96; \/\/ Default DPI for web images\r\n                        document.getElementById('dpi7').textContent = dpi7;\r\n                    };\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1248\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1248\" data-tab-index=\"8\" style=\"--n-tabs-title-order: 8;\" class=\"elementor-element elementor-element-47d3992 e-flex e-con-boxed e-con e-child\" data-id=\"47d3992\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f594cca elementor-widget elementor-widget-html\" data-id=\"f594cca\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Color Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview8 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .color-controls8 {\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Color Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload8\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload8\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview8\" src=\"#\" alt=\"Image Preview\" class=\"image-preview8\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Color Controls -->\r\n        <div class=\"row color-controls8\">\r\n            <div class=\"col-md-6 offset-md-3 text-center\">\r\n                <button class=\"btn btn-primary\" onclick=\"applyGrayscale8()\">Grayscale<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyBlackAndWhite8()\">Black & White<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applySepia8()\">Sepia<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyInvert8()\">Invert Colors<\/button>\r\n                <button class=\"btn btn-warning\" onclick=\"resetOriginal8()\">Original Image<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn8\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage8()\">Download Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement8 = document.getElementById('imagePreview8');\r\n        let originalImageSrc8 = null;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload8').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement8.src = e.target.result;\r\n                    imageElement8.style.display = 'block';\r\n                    originalImageSrc8 = e.target.result; \/\/ Save original image source\r\n                    document.getElementById('downloadBtn8').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Apply Grayscale\r\n        function applyGrayscale8() {\r\n            applyFilter8('grayscale(100%)');\r\n        }\r\n\r\n        \/\/ Apply Black & White\r\n        function applyBlackAndWhite8() {\r\n            applyFilter8('contrast(200%) grayscale(100%)');\r\n        }\r\n\r\n        \/\/ Apply Sepia\r\n        function applySepia8() {\r\n            applyFilter8('sepia(100%)');\r\n        }\r\n\r\n        \/\/ Apply Invert Colors\r\n        function applyInvert8() {\r\n            applyFilter8('invert(100%)');\r\n        }\r\n\r\n        \/\/ Apply Filter\r\n        function applyFilter8(filter) {\r\n            if (!imageElement8.src) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n            imageElement8.style.filter = filter;\r\n            document.getElementById('downloadBtn8').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Reset to Original Image\r\n        function resetOriginal8() {\r\n            if (!originalImageSrc8) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n            imageElement8.src = originalImageSrc8;\r\n            imageElement8.style.filter = 'none';\r\n            document.getElementById('downloadBtn8').style.display = 'none';\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage8() {\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = imageElement8.naturalWidth;\r\n            canvas.height = imageElement8.naturalHeight;\r\n\r\n            \/\/ Apply current filter to the canvas\r\n            ctx.filter = window.getComputedStyle(imageElement8).filter;\r\n            ctx.drawImage(imageElement8, 0, 0);\r\n\r\n            \/\/ Create download link\r\n            const link = document.createElement('a');\r\n            link.href = canvas.toDataURL('image\/png');\r\n            link.download = 'modified_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1249\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-1249\" data-tab-index=\"9\" style=\"--n-tabs-title-order: 9;\" class=\"elementor-element elementor-element-58b5ddc e-flex e-con-boxed e-con e-child\" data-id=\"58b5ddc\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3bed532 elementor-widget elementor-widget-html\" data-id=\"3bed532\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Filter Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview9 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .filter-controls9 {\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Filter Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload9\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload9\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview9\" src=\"#\" alt=\"Image Preview\" class=\"image-preview9\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Filter Controls -->\r\n        <div class=\"row filter-controls9\">\r\n            <div class=\"col-md-6 offset-md-3 text-center\">\r\n                <button class=\"btn btn-primary\" onclick=\"applyGrayscale9()\">Grayscale<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applySepia9()\">Sepia<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyInvert9()\">Invert Colors<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyBlur9()\">Blur<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyBrightness9()\">Brightness<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyContrast9()\">Contrast<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applyHueRotate9()\">Hue Rotate<\/button>\r\n                <button class=\"btn btn-primary\" onclick=\"applySaturate9()\">Saturate<\/button>\r\n                <button class=\"btn btn-warning\" onclick=\"resetOriginal9()\">Original Image<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn9\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage9()\">Download Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement9 = document.getElementById('imagePreview9');\r\n        let originalImageSrc9 = null;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload9').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement9.src = e.target.result;\r\n                    imageElement9.style.display = 'block';\r\n                    originalImageSrc9 = e.target.result; \/\/ Save original image source\r\n                    document.getElementById('downloadBtn9').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Apply Grayscale\r\n        function applyGrayscale9() {\r\n            applyFilter9('grayscale(100%)');\r\n        }\r\n\r\n        \/\/ Apply Sepia\r\n        function applySepia9() {\r\n            applyFilter9('sepia(100%)');\r\n        }\r\n\r\n        \/\/ Apply Invert Colors\r\n        function applyInvert9() {\r\n            applyFilter9('invert(100%)');\r\n        }\r\n\r\n        \/\/ Apply Blur\r\n        function applyBlur9() {\r\n            applyFilter9('blur(5px)');\r\n        }\r\n\r\n        \/\/ Apply Brightness\r\n        function applyBrightness9() {\r\n            applyFilter9('brightness(150%)');\r\n        }\r\n\r\n        \/\/ Apply Contrast\r\n        function applyContrast9() {\r\n            applyFilter9('contrast(200%)');\r\n        }\r\n\r\n        \/\/ Apply Hue Rotate\r\n        function applyHueRotate9() {\r\n            applyFilter9('hue-rotate(90deg)');\r\n        }\r\n\r\n        \/\/ Apply Saturate\r\n        function applySaturate9() {\r\n            applyFilter9('saturate(200%)');\r\n        }\r\n\r\n        \/\/ Apply Filter\r\n        function applyFilter9(filter) {\r\n            if (!imageElement9.src) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n            imageElement9.style.filter = filter;\r\n            document.getElementById('downloadBtn9').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Reset to Original Image\r\n        function resetOriginal9() {\r\n            if (!originalImageSrc9) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n            imageElement9.src = originalImageSrc9;\r\n            imageElement9.style.filter = 'none';\r\n            document.getElementById('downloadBtn9').style.display = 'none';\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage9() {\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = imageElement9.naturalWidth;\r\n            canvas.height = imageElement9.naturalHeight;\r\n\r\n            \/\/ Apply current filter to the canvas\r\n            ctx.filter = window.getComputedStyle(imageElement9).filter;\r\n            ctx.drawImage(imageElement9, 0, 0);\r\n\r\n            \/\/ Create download link\r\n            const link = document.createElement('a');\r\n            link.href = canvas.toDataURL('image\/png');\r\n            link.download = 'filtered_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-12410\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-12410\" data-tab-index=\"10\" style=\"--n-tabs-title-order: 10;\" class=\"elementor-element elementor-element-b10880a e-flex e-con-boxed e-con e-child\" data-id=\"b10880a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57906c2 elementor-widget elementor-widget-html\" data-id=\"57906c2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Resizer Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview10 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n        .resize-controls10 {\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Resizer Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload10\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload10\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview Section -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"imagePreview10\" src=\"#\" alt=\"Image Preview\" class=\"image-preview10\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Resize Controls -->\r\n        <div class=\"row resize-controls10\">\r\n            <div class=\"col-md-6 offset-md-3\">\r\n                <label for=\"resizeWidth10\" class=\"form-label\">Width (px):<\/label>\r\n                <input type=\"number\" class=\"form-control mb-2\" id=\"resizeWidth10\" placeholder=\"Width\">\r\n                <label for=\"resizeHeight10\" class=\"form-label\">Height (px):<\/label>\r\n                <input type=\"number\" class=\"form-control mb-2\" id=\"resizeHeight10\" placeholder=\"Height\">\r\n                <button class=\"btn btn-primary w-100\" onclick=\"resizeImage10()\">Resize Image<\/button>\r\n                <button class=\"btn btn-warning w-100 mt-2\" onclick=\"resetOriginal10()\">Original Image<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn10\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadImage10()\">Download Resized Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement10 = document.getElementById('imagePreview10');\r\n        let originalImageSrc10 = null;\r\n        let originalWidth10 = 0;\r\n        let originalHeight10 = 0;\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload10').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement10.src = e.target.result;\r\n                    imageElement10.style.display = 'block';\r\n                    originalImageSrc10 = e.target.result; \/\/ Save original image source\r\n\r\n                    \/\/ Get original dimensions\r\n                    imageElement10.onload = function() {\r\n                        originalWidth10 = imageElement10.naturalWidth;\r\n                        originalHeight10 = imageElement10.naturalHeight;\r\n\r\n                        \/\/ Set default width and height inputs\r\n                        document.getElementById('resizeWidth10').value = originalWidth10;\r\n                        document.getElementById('resizeHeight10').value = originalHeight10;\r\n                    };\r\n\r\n                    document.getElementById('downloadBtn10').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Resize Image\r\n        function resizeImage10() {\r\n            const widthInput = document.getElementById('resizeWidth10').value;\r\n            const heightInput = document.getElementById('resizeHeight10').value;\r\n\r\n            if (!widthInput || !heightInput || widthInput <= 0 || heightInput <= 0) {\r\n                alert(\"Please enter valid width and height values.\");\r\n                return;\r\n            }\r\n\r\n            const width = parseInt(widthInput);\r\n            const height = parseInt(heightInput);\r\n\r\n            \/\/ Calculate aspect ratio\r\n            const aspectRatio = originalWidth10 \/ originalHeight10;\r\n            let newWidth, newHeight;\r\n\r\n            if (width \/ height > aspectRatio) {\r\n                \/\/ Height is the limiting dimension\r\n                newHeight = height;\r\n                newWidth = Math.round(newHeight * aspectRatio);\r\n            } else {\r\n                \/\/ Width is the limiting dimension\r\n                newWidth = width;\r\n                newHeight = Math.round(newWidth \/ aspectRatio);\r\n            }\r\n\r\n            \/\/ Create canvas and resize image\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            canvas.width = newWidth;\r\n            canvas.height = newHeight;\r\n\r\n            ctx.drawImage(imageElement10, 0, 0, newWidth, newHeight);\r\n\r\n            \/\/ Update image preview\r\n            imageElement10.src = canvas.toDataURL();\r\n            document.getElementById('downloadBtn10').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Reset to Original Image\r\n        function resetOriginal10() {\r\n            if (!originalImageSrc10) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n            imageElement10.src = originalImageSrc10;\r\n            document.getElementById('resizeWidth10').value = originalWidth10;\r\n            document.getElementById('resizeHeight10').value = originalHeight10;\r\n            document.getElementById('downloadBtn10').style.display = 'none';\r\n        }\r\n\r\n        \/\/ Download Image\r\n        function downloadImage10() {\r\n            const link = document.createElement('a');\r\n            link.href = imageElement10.src;\r\n            link.download = 'resized_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-12411\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-12411\" data-tab-index=\"11\" style=\"--n-tabs-title-order: 11;\" class=\"elementor-element elementor-element-71fbb1f e-flex e-con-boxed e-con e-child\" data-id=\"71fbb1f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e09adee elementor-widget elementor-widget-html\" data-id=\"e09adee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Bulk Image Resizer Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-preview11 {\r\n            max-width: 100%;\r\n            max-height: 150px;\r\n            margin-top: 10px;\r\n        }\r\n        .resize-controls11 {\r\n            margin-top: 20px;\r\n        }\r\n        .image-list11 {\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Bulk Image Resizer Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload11\" class=\"form-label\">Upload Images (Multiple)<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload11\" accept=\"image\/*\" multiple>\r\n        <\/div>\r\n\r\n        <!-- Resize Controls -->\r\n        <div class=\"row resize-controls11\">\r\n            <div class=\"col-md-6 offset-md-3\">\r\n                <label for=\"resizeWidth11\" class=\"form-label\">Width (px):<\/label>\r\n                <input type=\"number\" class=\"form-control mb-2\" id=\"resizeWidth11\" placeholder=\"Width\">\r\n                <label for=\"resizeHeight11\" class=\"form-label\">Height (px):<\/label>\r\n                <input type=\"number\" class=\"form-control mb-2\" id=\"resizeHeight11\" placeholder=\"Height\">\r\n                <button class=\"btn btn-primary w-100\" onclick=\"resizeAllImages11()\">Resize All Images<\/button>\r\n                <button class=\"btn btn-warning w-100 mt-2\" onclick=\"resetAllImages11()\">Reset All Images<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Image List Section -->\r\n        <div class=\"row image-list11\" id=\"imageList11\"><\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadAllBtn11\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadAllImages11()\">Download All Resized Images<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let uploadedImages11 = []; \/\/ Store uploaded images\r\n        let resizedImages11 = []; \/\/ Store resized images\r\n\r\n        \/\/ Image Upload\r\n        document.getElementById('imageUpload11').addEventListener('change', function(event) {\r\n            const files = event.target.files;\r\n            if (files.length > 0) {\r\n                uploadedImages11 = []; \/\/ Clear previous uploads\r\n                resizedImages11 = []; \/\/ Clear previous resized images\r\n                document.getElementById('imageList11').innerHTML = ''; \/\/ Clear image list\r\n\r\n                for (let i = 0; i < files.length; i++) {\r\n                    const file = files[i];\r\n                    const reader = new FileReader();\r\n                    reader.onload = function(e) {\r\n                        const imageData = {\r\n                            originalSrc: e.target.result,\r\n                            name: file.name,\r\n                            width: 0,\r\n                            height: 0,\r\n                        };\r\n\r\n                        \/\/ Create image element to get dimensions\r\n                        const img = new Image();\r\n                        img.src = e.target.result;\r\n                        img.onload = function() {\r\n                            imageData.width = img.naturalWidth;\r\n                            imageData.height = img.naturalHeight;\r\n\r\n                            \/\/ Add image to the list\r\n                            const imageContainer = document.createElement('div');\r\n                            imageContainer.className = 'col-md-4 mb-3';\r\n                            imageContainer.innerHTML = `\r\n                                <img decoding=\"async\" src=\"${e.target.result}\" alt=\"Image Preview\" class=\"image-preview11\">\r\n                                <p class=\"mt-2\">${file.name}<\/p>\r\n                            `;\r\n                            document.getElementById('imageList11').appendChild(imageContainer);\r\n                        };\r\n\r\n                        uploadedImages11.push(imageData);\r\n                    };\r\n                    reader.readAsDataURL(file);\r\n                }\r\n\r\n                document.getElementById('downloadAllBtn11').style.display = 'none';\r\n            }\r\n        });\r\n\r\n        \/\/ Resize All Images\r\n        function resizeAllImages11() {\r\n            const widthInput = document.getElementById('resizeWidth11').value;\r\n            const heightInput = document.getElementById('resizeHeight11').value;\r\n\r\n            if (!widthInput || !heightInput || widthInput <= 0 || heightInput <= 0) {\r\n                alert(\"Please enter valid width and height values.\");\r\n                return;\r\n            }\r\n\r\n            const width = parseInt(widthInput);\r\n            const height = parseInt(heightInput);\r\n\r\n            resizedImages11 = []; \/\/ Clear previous resized images\r\n\r\n            uploadedImages11.forEach((imageData, index) => {\r\n                const aspectRatio = imageData.width \/ imageData.height;\r\n                let newWidth, newHeight;\r\n\r\n                if (width \/ height > aspectRatio) {\r\n                    \/\/ Height is the limiting dimension\r\n                    newHeight = height;\r\n                    newWidth = Math.round(newHeight * aspectRatio);\r\n                } else {\r\n                    \/\/ Width is the limiting dimension\r\n                    newWidth = width;\r\n                    newHeight = Math.round(newWidth \/ aspectRatio);\r\n                }\r\n\r\n                \/\/ Create canvas and resize image\r\n                const canvas = document.createElement('canvas');\r\n                const ctx = canvas.getContext('2d');\r\n                canvas.width = newWidth;\r\n                canvas.height = newHeight;\r\n\r\n                const img = new Image();\r\n                img.src = imageData.originalSrc;\r\n                img.onload = function() {\r\n                    ctx.drawImage(img, 0, 0, newWidth, newHeight);\r\n\r\n                    \/\/ Save resized image\r\n                    resizedImages11.push({\r\n                        src: canvas.toDataURL('image\/png'),\r\n                        name: `resized_${imageData.name}`,\r\n                    });\r\n\r\n                    \/\/ Update image preview\r\n                    const imageContainer = document.getElementById('imageList11').children[index];\r\n                    imageContainer.innerHTML = `\r\n                        <img decoding=\"async\" src=\"${canvas.toDataURL('image\/png')}\" alt=\"Resized Image Preview\" class=\"image-preview11\">\r\n                        <p class=\"mt-2\">Resized: ${imageData.name}<\/p>\r\n                    `;\r\n\r\n                    \/\/ Show download button if all images are resized\r\n                    if (resizedImages11.length === uploadedImages11.length) {\r\n                        document.getElementById('downloadAllBtn11').style.display = 'block';\r\n                    }\r\n                };\r\n            });\r\n        }\r\n\r\n        \/\/ Reset All Images\r\n        function resetAllImages11() {\r\n            if (uploadedImages11.length === 0) {\r\n                alert(\"Please upload images first.\");\r\n                return;\r\n            }\r\n\r\n            document.getElementById('imageList11').innerHTML = ''; \/\/ Clear image list\r\n            uploadedImages11.forEach((imageData, index) => {\r\n                const imageContainer = document.createElement('div');\r\n                imageContainer.className = 'col-md-4 mb-3';\r\n                imageContainer.innerHTML = `\r\n                    <img decoding=\"async\" src=\"${imageData.originalSrc}\" alt=\"Image Preview\" class=\"image-preview11\">\r\n                    <p class=\"mt-2\">${imageData.name}<\/p>\r\n                `;\r\n                document.getElementById('imageList11').appendChild(imageContainer);\r\n            });\r\n\r\n            document.getElementById('downloadAllBtn11').style.display = 'none';\r\n        }\r\n\r\n        \/\/ Download All Resized Images\r\n        function downloadAllImages11() {\r\n            if (resizedImages11.length === 0) {\r\n                alert(\"No resized images available to download.\");\r\n                return;\r\n            }\r\n\r\n            resizedImages11.forEach((imageData) => {\r\n                const link = document.createElement('a');\r\n                link.href = imageData.src;\r\n                link.download = imageData.name;\r\n                link.click();\r\n            });\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-12412\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-12412\" data-tab-index=\"12\" style=\"--n-tabs-title-order: 12;\" class=\"elementor-element elementor-element-fc888d7 e-flex e-con-boxed e-con e-child\" data-id=\"fc888d7\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e1aa4f8 elementor-widget elementor-widget-html\" data-id=\"e1aa4f8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Variable Image Cropping Tool<\/title>\r\n    <!-- Bootstrap CSS -->\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <!-- Cropper.js CSS -->\r\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.6.1\/cropper.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        .image-container12 {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            margin-top: 20px;\r\n        }\r\n        .cropped-image12 {\r\n            max-width: 100%;\r\n            max-height: 300px;\r\n            margin-top: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container mt-5\">\r\n        <h1 class=\"text-center mb-4\">Image Cropping Tool<\/h1>\r\n\r\n        <!-- Image Upload Section -->\r\n        <div class=\"mb-3\">\r\n            <label for=\"imageUpload12\" class=\"form-label\">Upload Image<\/label>\r\n            <input class=\"form-control\" type=\"file\" id=\"imageUpload12\" accept=\"image\/*\">\r\n        <\/div>\r\n\r\n        <!-- Image Preview and Cropping Area -->\r\n        <div class=\"text-center\">\r\n            <div class=\"image-container12\">\r\n                <img decoding=\"async\" id=\"imagePreview12\" src=\"#\" alt=\"Image Preview\" style=\"display: none;\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Crop Shape Selection -->\r\n        <div class=\"row mt-4\">\r\n            <div class=\"col-md-6 offset-md-3\">\r\n                <label for=\"cropShape12\" class=\"form-label\">Select Crop Shape:<\/label>\r\n                <select class=\"form-select\" id=\"cropShape12\">\r\n                    <option value=\"rectangle\">Rectangle<\/option>\r\n                    <option value=\"circle\">Circle<\/option>\r\n                    <option value=\"ellipse\">Ellipse<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Cropped Image Preview -->\r\n        <div class=\"text-center\">\r\n            <img decoding=\"async\" id=\"croppedImage12\" src=\"#\" alt=\"Cropped Image\" class=\"cropped-image12\" style=\"display: none;\">\r\n        <\/div>\r\n\r\n        <!-- Crop Controls -->\r\n        <div class=\"row mt-4\">\r\n            <div class=\"col-md-6 offset-md-3 text-center\">\r\n                <button class=\"btn btn-primary\" onclick=\"cropImage12()\">Crop Image<\/button>\r\n                <button class=\"btn btn-warning\" onclick=\"resetOriginal12()\">Reset Image<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Download Button -->\r\n        <div class=\"text-center mt-4\">\r\n            <button id=\"downloadBtn12\" class=\"btn btn-success\" style=\"display: none;\" onclick=\"downloadCroppedImage12()\">Download Cropped Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bootstrap JS and dependencies -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.min.js\"><\/script>\r\n    <!-- Cropper.js Library -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.6.1\/cropper.min.js\"><\/script>\r\n    <!-- Custom JS -->\r\n    <script>\r\n        let imageElement12 = document.getElementById('imagePreview12');\r\n        let cropperInstance12 = null; \/\/ Cropper.js instance\r\n        let originalImageSrc12 = null; \/\/ Store original image source\r\n\r\n        \/\/ Initialize Cropper.js when an image is uploaded\r\n        document.getElementById('imageUpload12').addEventListener('change', function(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    imageElement12.src = e.target.result;\r\n                    imageElement12.style.display = 'block';\r\n                    originalImageSrc12 = e.target.result; \/\/ Save original image source\r\n\r\n                    \/\/ Destroy previous Cropper instance if it exists\r\n                    if (cropperInstance12) {\r\n                        cropperInstance12.destroy();\r\n                    }\r\n\r\n                    \/\/ Initialize Cropper.js\r\n                    cropperInstance12 = new Cropper(imageElement12, {\r\n                        aspectRatio: NaN, \/\/ Freeform cropping (no fixed aspect ratio)\r\n                        viewMode: 1, \/\/ Restrict the crop box to the size of the image\r\n                        autoCropArea: 0.8, \/\/ Automatically set the crop area to 80% of the image\r\n                        responsive: true, \/\/ Re-render the cropper when the window is resized\r\n                        guides: true, \/\/ Show dashed lines for the crop box\r\n                        center: true, \/\/ Show a center indicator\r\n                        background: true, \/\/ Show a grid background\r\n                        movable: true, \/\/ Allow the crop box to be moved\r\n                        rotatable: false, \/\/ Disable image rotation\r\n                        scalable: false, \/\/ Disable image scaling\r\n                        zoomable: true, \/\/ Allow zooming the image\r\n                        cropBoxResizable: true, \/\/ Allow resizing the crop box\r\n                    });\r\n\r\n                    \/\/ Hide download button and cropped image preview\r\n                    document.getElementById('downloadBtn12').style.display = 'none';\r\n                    document.getElementById('croppedImage12').style.display = 'none';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        \/\/ Crop Image\r\n        function cropImage12() {\r\n            if (!cropperInstance12) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Get the cropped image data\r\n            const croppedCanvas = cropperInstance12.getCroppedCanvas();\r\n            if (!croppedCanvas) {\r\n                alert(\"Please select a cropping area.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Get the selected crop shape\r\n            const cropShape12 = document.getElementById('cropShape12').value;\r\n\r\n            \/\/ Create a new canvas to apply the selected shape\r\n            const shapeCanvas = document.createElement('canvas');\r\n            const ctx = shapeCanvas.getContext('2d');\r\n            shapeCanvas.width = croppedCanvas.width;\r\n            shapeCanvas.height = croppedCanvas.height;\r\n\r\n            \/\/ Apply the selected shape\r\n            if (cropShape12 === 'rectangle') {\r\n                \/\/ Rectangle crop (default)\r\n                ctx.drawImage(croppedCanvas, 0, 0);\r\n            } else if (cropShape12 === 'circle') {\r\n                \/\/ Circle crop\r\n                ctx.beginPath();\r\n                ctx.arc(croppedCanvas.width \/ 2, croppedCanvas.height \/ 2, Math.min(croppedCanvas.width, croppedCanvas.height) \/ 2, 0, Math.PI * 2);\r\n                ctx.clip();\r\n                ctx.drawImage(croppedCanvas, 0, 0);\r\n            } else if (cropShape12 === 'ellipse') {\r\n                \/\/ Ellipse crop\r\n                ctx.beginPath();\r\n                ctx.ellipse(croppedCanvas.width \/ 2, croppedCanvas.height \/ 2, croppedCanvas.width \/ 2, croppedCanvas.height \/ 2, 0, 0, Math.PI * 2);\r\n                ctx.clip();\r\n                ctx.drawImage(croppedCanvas, 0, 0);\r\n            }\r\n\r\n            \/\/ Display the cropped image\r\n            const croppedImageElement12 = document.getElementById('croppedImage12');\r\n            croppedImageElement12.src = shapeCanvas.toDataURL('image\/png');\r\n            croppedImageElement12.style.display = 'block';\r\n\r\n            \/\/ Show the download button\r\n            document.getElementById('downloadBtn12').style.display = 'block';\r\n        }\r\n\r\n        \/\/ Reset to Original Image\r\n        function resetOriginal12() {\r\n            if (!originalImageSrc12) {\r\n                alert(\"Please upload an image first.\");\r\n                return;\r\n            }\r\n\r\n            \/\/ Reset the image to its original state\r\n            imageElement12.src = originalImageSrc12;\r\n            if (cropperInstance12) {\r\n                cropperInstance12.destroy(); \/\/ Destroy the Cropper instance\r\n                cropperInstance12 = null;\r\n            }\r\n\r\n            \/\/ Hide the cropped image and download button\r\n            document.getElementById('croppedImage12').style.display = 'none';\r\n            document.getElementById('downloadBtn12').style.display = 'none';\r\n        }\r\n\r\n        \/\/ Download Cropped Image\r\n        function downloadCroppedImage12() {\r\n            const croppedImageElement12 = document.getElementById('croppedImage12');\r\n            if (!croppedImageElement12.src) {\r\n                alert(\"No cropped image available to download.\");\r\n                return;\r\n            }\r\n\r\n            const link = document.createElement('a');\r\n            link.href = croppedImageElement12.src;\r\n            link.download = 'cropped_image.png';\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-12413\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-12413\" data-tab-index=\"13\" style=\"--n-tabs-title-order: 13;\" class=\"elementor-element elementor-element-1c583c6 e-flex e-con-boxed e-con e-child\" data-id=\"1c583c6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1026d9a elementor-widget elementor-widget-html\" data-id=\"1026d9a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Combine Images to PDF<\/title>\r\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n  <style>\r\n    .image-container13 {\r\n      margin: 10px;\r\n      padding: 10px;\r\n      border: 1px solid #ddd;\r\n      display: inline-block;\r\n      cursor: grab;\r\n    }\r\n    .image-container13 img {\r\n      max-width: 150px;\r\n      max-height: 150px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"container mt-5\">\r\n    <h1 class=\"mb-4\">Combine Images to PDF<\/h1>\r\n    <input type=\"file\" id=\"imageUpload13\" class=\"form-control mb-3\" accept=\"image\/*\" multiple>\r\n    <div id=\"imagePreview13\" class=\"mb-3\"><\/div>\r\n    <button id=\"generatePdf13\" class=\"btn btn-primary\">Generate PDF<\/button>\r\n  <\/div>\r\n\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n  <script>\r\n    document.addEventListener(\"DOMContentLoaded\", function () {\r\n      const imageUpload13 = document.getElementById(\"imageUpload13\");\r\n      const imagePreview13 = document.getElementById(\"imagePreview13\");\r\n      const generatePdf13 = document.getElementById(\"generatePdf13\");\r\n      let images13 = [];\r\n\r\n      \/\/ Handle image upload\r\n      imageUpload13.addEventListener(\"change\", function (event) {\r\n        const files = event.target.files;\r\n        images13 = []; \/\/ Reset images array\r\n        imagePreview13.innerHTML = \"\"; \/\/ Clear preview\r\n\r\n        for (let i = 0; i < files.length; i++) {\r\n          const file = files[i];\r\n          const reader = new FileReader();\r\n\r\n          reader.onload = function (e) {\r\n            const img = document.createElement(\"img\");\r\n            img.src = e.target.result;\r\n            img.classList.add(\"img-fluid\");\r\n\r\n            const container = document.createElement(\"div\");\r\n            container.classList.add(\"image-container13\");\r\n            container.setAttribute(\"data-index13\", i);\r\n            container.appendChild(img);\r\n\r\n            \/\/ Add drag and drop functionality\r\n            container.draggable = true;\r\n            container.addEventListener(\"dragstart\", dragStart13);\r\n            container.addEventListener(\"dragover\", dragOver13);\r\n            container.addEventListener(\"drop\", drop13);\r\n\r\n            imagePreview13.appendChild(container);\r\n            images13.push({ src: img.src, element: img });\r\n          };\r\n\r\n          reader.readAsDataURL(file);\r\n        }\r\n      });\r\n\r\n      \/\/ Generate PDF\r\n      generatePdf13.addEventListener(\"click\", async function () {\r\n        if (images13.length === 0) {\r\n          alert(\"Please upload at least one image.\");\r\n          return;\r\n        }\r\n\r\n        const { jsPDF } = window.jspdf;\r\n        const pdf = new jsPDF();\r\n\r\n        for (let i = 0; i < images13.length; i++) {\r\n          const img = images13[i].element;\r\n          const canvas = await html2canvas(img, { scale: 2 }); \/\/ Increase scale for better quality\r\n          const imgData = canvas.toDataURL(\"image\/jpeg\", 1.0);\r\n\r\n          if (i > 0) pdf.addPage(); \/\/ Add new page for each image after the first\r\n          pdf.addImage(imgData, \"JPEG\", 10, 10, 180, 160); \/\/ Adjust dimensions as needed\r\n        }\r\n\r\n        pdf.save(\"combined_images13.pdf\");\r\n      });\r\n\r\n      \/\/ Drag and drop functionality\r\n      let dragIndex13;\r\n\r\n      function dragStart13(event) {\r\n        dragIndex13 = event.target.getAttribute(\"data-index13\");\r\n        event.dataTransfer.setData(\"text\/plain\", dragIndex13);\r\n      }\r\n\r\n      function dragOver13(event) {\r\n        event.preventDefault();\r\n      }\r\n\r\n      function drop13(event) {\r\n        event.preventDefault();\r\n        const dropIndex13 = event.target.getAttribute(\"data-index13\");\r\n        if (dragIndex13 === dropIndex13) return; \/\/ No change if dropped on itself\r\n\r\n        \/\/ Swap images in the array\r\n        [images13[dragIndex13], images13[dropIndex13]] = [images13[dropIndex13], images13[dragIndex13]];\r\n\r\n        \/\/ Swap images in the DOM\r\n        const containers = document.querySelectorAll(\".image-container13\");\r\n        const temp = containers[dragIndex13].innerHTML;\r\n        containers[dragIndex13].innerHTML = containers[dropIndex13].innerHTML;\r\n        containers[dropIndex13].innerHTML = temp;\r\n\r\n        \/\/ Update data-index13 attributes\r\n        containers[dragIndex13].setAttribute(\"data-index13\", dragIndex13);\r\n        containers[dropIndex13].setAttribute(\"data-index13\", dropIndex13);\r\n      }\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-12414\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-12414\" data-tab-index=\"14\" style=\"--n-tabs-title-order: 14;\" class=\"elementor-element elementor-element-2e4e345 e-flex e-con-boxed e-con e-child\" data-id=\"2e4e345\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a424148 elementor-widget elementor-widget-html\" data-id=\"a424148\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Size Reducer<\/title>\r\n    <style>\r\n        .container14 {\r\n            text-align: center;\r\n        }\r\n        .input-section14 {\r\n            margin: 20px 0;\r\n        }\r\n        input[type=\"number\"] {\r\n            padding: 5px;\r\n            margin: 5px;\r\n            width: 100px;\r\n        }\r\n        #preview14 {\r\n            max-width: 100%;\r\n            margin: 20px 0;\r\n        }\r\n        button {\r\n            padding: 10px 20px;\r\n            background-color: #4CAF50;\r\n            color: white;\r\n            border: none;\r\n            cursor: pointer;\r\n        }\r\n        button:hover {\r\n            background-color: #45a049;\r\n        }\r\n        #downloadBtn14 {\r\n            display: none;\r\n            background-color: #2196F3;\r\n        }\r\n        #sizeInfo14 {\r\n            margin: 10px 0;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container14\">\r\n        <h1>Image Size Reducer<\/h1>\r\n        \r\n        <div class=\"input-section14\">\r\n            <input type=\"file\" id=\"imageInput14\" accept=\"image\/*\">\r\n            <br>\r\n            <label>Target Size: <\/label>\r\n            <input type=\"number\" id=\"targetSize14\" min=\"1\" placeholder=\"KB\">\r\n            <br>\r\n            <button onclick=\"resizeImage()\">Reduce Size<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"sizeInfo14\"><\/div>\r\n        <div>\r\n            <img id=\"preview14\" alt=\"preview14 will appear here\">\r\n        <\/div>\r\n\r\n        <button id=\"downloadBtn14\" onclick=\"downloadImage()\">Download Resized Image<\/button>\r\n    <\/div>\r\n\r\n    <script>\r\n        let originalImage = null;\r\n        let resizedImageData = null;\r\n        let originalSize = 0;\r\n\r\n        document.getElementById('imageInput14').addEventListener('change', function(e) {\r\n            const file = e.target.files[0];\r\n            if (file) {\r\n                originalSize = Math.round(file.size \/ 1024); \/\/ Convert to KB\r\n                const reader = new FileReader();\r\n                reader.onload = function(event) {\r\n                    const img = new Image();\r\n                    img.onload = function() {\r\n                        originalImage = img;\r\n                        document.getElementById('preview14').src = event.target.result;\r\n                        document.getElementById('sizeInfo14').textContent = \r\n                            `Original Size: ${originalSize} KB`;\r\n                    }\r\n                    img.src = event.target.result;\r\n                }\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        function resizeImage() {\r\n            if (!originalImage) {\r\n                alert('Please upload an image first!');\r\n                return;\r\n            }\r\n\r\n            const targetSize14KB = parseInt(document.getElementById('targetSize14').value);\r\n            if (!targetSize14KB || targetSize14KB <= 0) {\r\n                alert('Please enter a valid target size in KB!');\r\n                return;\r\n            }\r\n\r\n            if (targetSize14KB >= originalSize) {\r\n                alert('Target size must be smaller than original size!');\r\n                return;\r\n            }\r\n\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            \r\n            \/\/ Calculate scaling factor based on size ratio\r\n            const sizeRatio = targetSize14KB \/ originalSize;\r\n            const scale = Math.sqrt(sizeRatio) * 0.9; \/\/ Add 10% buffer\r\n            \r\n            \/\/ Calculate new dimensions\r\n            const width = Math.round(originalImage.width * scale);\r\n            const height = Math.round(originalImage.height * scale);\r\n            \r\n            canvas.width = width;\r\n            canvas.height = height;\r\n            ctx.drawImage(originalImage, 0, 0, width, height);\r\n\r\n            \/\/ Start with moderate quality and adjust if needed\r\n            let quality = 0.7;\r\n            resizedImageData = canvas.toDataURL('image\/jpeg', quality);\r\n            \r\n            \/\/ Convert base64 to approximate KB size\r\n            const sizeKB = Math.round((resizedImageData.length - 'data:image\/jpeg;base64,'.length) * 0.75 \/ 1024);\r\n            \r\n            \/\/ If size is still too large, reduce quality further\r\n            if (sizeKB > targetSize14KB) {\r\n                quality = 0.5;\r\n                resizedImageData = canvas.toDataURL('image\/jpeg', quality);\r\n            }\r\n\r\n            document.getElementById('preview14').src = resizedImageData;\r\n            const finalSizeKB = Math.round((resizedImageData.length - 'data:image\/jpeg;base64,'.length) * 0.75 \/ 1024);\r\n            document.getElementById('sizeInfo14').textContent = \r\n                `Original Size: ${originalSize} KB | New Size: ${finalSizeKB} KB`;\r\n            document.getElementById('downloadBtn14').style.display = 'block';\r\n        }\r\n\r\n        function downloadImage() {\r\n            if (!resizedImageData) {\r\n                alert('Please resize an image first!');\r\n                return;\r\n            }\r\n\r\n            const link = document.createElement('a');\r\n            link.download = 'resized_image.jpg';\r\n            link.href = resizedImageData;\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-12415\" role=\"tabpanel\" aria-labelledby=\"e-n-tabs-title-12415\" data-tab-index=\"15\" style=\"--n-tabs-title-order: 15;\" class=\"elementor-element elementor-element-655b5bd e-flex e-con-boxed e-con e-child\" data-id=\"655b5bd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0eadb9a elementor-widget elementor-widget-html\" data-id=\"0eadb9a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Bulk Image Size Reducer<\/title>\r\n    <style>\r\n        .container15 {\r\n            text-align: center;\r\n        }\r\n        .input-section15 {\r\n            margin: 20px 0;\r\n        }\r\n        input[type=\"number\"] {\r\n            padding: 5px;\r\n            margin: 5px;\r\n            width: 100px;\r\n        }\r\n        .preview-container15 {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 20px;\r\n            justify-content: center;\r\n            margin: 20px 0;\r\n        }\r\n        .image-preview {\r\n            max-width: 200px;\r\n            text-align: center;\r\n        }\r\n        .image-preview img {\r\n            max-width: 100%;\r\n        }\r\n        button {\r\n            padding: 10px 20px;\r\n            background-color: #4CAF50;\r\n            color: white;\r\n            border: none;\r\n            cursor: pointer;\r\n            margin: 5px;\r\n        }\r\n        button:hover {\r\n            background-color: #45a049;\r\n        }\r\n        #downloadAllBtn15 {\r\n            display: none;\r\n            background-color: #2196F3;\r\n        }\r\n        #sizeInfo15 {\r\n            margin: 10px 0;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container15\">\r\n        <h1>Bulk Image Size Reducer<\/h1>\r\n        \r\n        <div class=\"input-section15\">\r\n            <input type=\"file\" id=\"imageInput15\" accept=\"image\/*\" multiple>\r\n            <br>\r\n            <label>Target Size per Image: <\/label>\r\n            <input type=\"number\" id=\"targetSize15\" min=\"1\" placeholder=\"KB\">\r\n            <br>\r\n            <button onclick=\"resizeImages()\">Reduce All Sizes<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"sizeInfo15\"><\/div>\r\n        <div class=\"preview-container15\" id=\"previewcontainer15\"><\/div>\r\n\r\n        <button id=\"downloadAllBtn15\" onclick=\"downloadAllImages()\">Download All Resized Images<\/button>\r\n    <\/div>\r\n\r\n    <script>\r\n        let imageData = [];\r\n        let resizedImages = [];\r\n\r\n        document.getElementById('imageInput15').addEventListener('change', function(e) {\r\n            const files = e.target.files;\r\n            if (files.length > 0) {\r\n                imageData = [];\r\n                const previewcontainer15 = document.getElementById('previewcontainer15');\r\n                previewcontainer15.innerHTML = '';\r\n                \r\n                Array.from(files).forEach((file, index) => {\r\n                    const reader = new FileReader();\r\n                    reader.onload = function(event) {\r\n                        const img = new Image();\r\n                        img.onload = function() {\r\n                            imageData.push({\r\n                                file: file,\r\n                                originalImage: img,\r\n                                originalSize: Math.round(file.size \/ 1024),\r\n                                dataUrl: event.target.result\r\n                            });\r\n                            \r\n                            const previewDiv = document.createElement('div');\r\n                            previewDiv.className = 'image-preview';\r\n                            previewDiv.innerHTML = `\r\n                                <img decoding=\"async\" src=\"${event.target.result}\" id=\"preview-${index}15\">\r\n                                <div>Original: ${Math.round(file.size \/ 1024)} KB<\/div>\r\n                                <div id=\"new-size-${index}15\"><\/div>\r\n                            `;\r\n                            previewcontainer15.appendChild(previewDiv);\r\n                        }\r\n                        img.src = event.target.result;\r\n                    }\r\n                    reader.readAsDataURL(file);\r\n                });\r\n            }\r\n        });\r\n\r\n        function resizeImages() {\r\n            if (imageData.length === 0) {\r\n                alert('Please upload at least one image first!');\r\n                return;\r\n            }\r\n\r\n            const targetSize15KB = parseInt(document.getElementById('targetSize15').value);\r\n            if (!targetSize15KB || targetSize15KB <= 0) {\r\n                alert('Please enter a valid target size in KB!');\r\n                return;\r\n            }\r\n\r\n            resizedImages = [];\r\n            imageData.forEach((data, index) => {\r\n                if (targetSize15KB >= data.originalSize) {\r\n                    alert(`Target size must be smaller than original size for ${data.file.name} (${data.originalSize} KB)!`);\r\n                    return;\r\n                }\r\n\r\n                const canvas = document.createElement('canvas');\r\n                const ctx = canvas.getContext('2d');\r\n                \r\n                const sizeRatio = targetSize15KB \/ data.originalSize;\r\n                const scale = Math.sqrt(sizeRatio) * 0.9;\r\n                \r\n                const width = Math.round(data.originalImage.width * scale);\r\n                const height = Math.round(data.originalImage.height * scale);\r\n                \r\n                canvas.width = width;\r\n                canvas.height = height;\r\n                ctx.drawImage(data.originalImage, 0, 0, width, height);\r\n\r\n                let quality = 0.7;\r\n                let resizedDataUrl = canvas.toDataURL('image\/jpeg', quality);\r\n                let sizeKB = Math.round((resizedDataUrl.length - 'data:image\/jpeg;base64,'.length) * 0.75 \/ 1024);\r\n                \r\n                if (sizeKB > targetSize15KB) {\r\n                    quality = 0.5;\r\n                    resizedDataUrl = canvas.toDataURL('image\/jpeg', quality);\r\n                    sizeKB = Math.round((resizedDataUrl.length - 'data:image\/jpeg;base64,'.length) * 0.75 \/ 1024);\r\n                }\r\n\r\n                document.getElementById(`preview-${index}15`).src = resizedDataUrl;\r\n                document.getElementById(`new-size-${index}15`).textContent = `New: ${sizeKB} KB`;\r\n                \r\n                resizedImages.push({\r\n                    dataUrl: resizedDataUrl,\r\n                    filename: `resized_${data.file.name}`\r\n                });\r\n            });\r\n\r\n            if (resizedImages.length > 0) {\r\n                document.getElementById('downloadAllBtn15').style.display = 'block';\r\n            }\r\n        }\r\n\r\n        function downloadAllImages() {\r\n            if (resizedImages.length === 0) {\r\n                alert('Please resize images first!');\r\n                return;\r\n            }\r\n\r\n            resizedImages.forEach((image, index) => {\r\n                const link = document.createElement('a');\r\n                link.download = image.filename;\r\n                link.href = image.dataUrl;\r\n                link.click();\r\n                \/\/ Add small delay between downloads to prevent browser blocking\r\n                setTimeout(() => {}, 100 * index);\r\n            });\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea4ed68 elementor-widget elementor-widget-testimonial\" data-id=\"ea4ed68\" data-element_type=\"widget\" data-widget_type=\"testimonial.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-testimonial-wrapper{overflow:hidden;text-align:center}.elementor-testimonial-wrapper .elementor-testimonial-content{font-size:1.3em;margin-bottom:20px}.elementor-testimonial-wrapper .elementor-testimonial-name{line-height:1.5;display:block}.elementor-testimonial-wrapper .elementor-testimonial-job{font-size:.85em;display:block}.elementor-testimonial-wrapper .elementor-testimonial-meta{width:100%;line-height:1}.elementor-testimonial-wrapper .elementor-testimonial-meta-inner{display:inline-block}.elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-details,.elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-image{display:table-cell;vertical-align:middle}.elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-image img{width:60px;height:60px;border-radius:50%;-o-object-fit:cover;object-fit:cover;max-width:none}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-aside .elementor-testimonial-image{padding-inline-end:15px}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-aside .elementor-testimonial-details{text-align:start}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-details,.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-image{display:block}.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-image{margin-bottom:20px}<\/style>\t\t<div class=\"elementor-testimonial-wrapper\">\n\t\t\t\t\t\t\t<div class=\"elementor-testimonial-content\">Note: These are client-based image tools and will not store any images on the our server.<\/div>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b9c845 e-flex e-con-boxed e-con e-parent\" data-id=\"7b9c845\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d1c4e0 elementor-widget elementor-widget-html\" data-id=\"5d1c4e0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Image Size Reducer<\/title>\r\n    <style>\r\n        .container {\r\n            text-align: center;\r\n        }\r\n        .input-section {\r\n            margin: 20px 0;\r\n        }\r\n        input[type=\"number\"] {\r\n            padding: 5px;\r\n            margin: 5px;\r\n            width: 100px;\r\n        }\r\n        #preview {\r\n            max-width: 100%;\r\n            margin: 20px 0;\r\n        }\r\n        button {\r\n            padding: 10px 20px;\r\n            background-color: #4CAF50;\r\n            color: white;\r\n            border: none;\r\n            cursor: pointer;\r\n        }\r\n        button:hover {\r\n            background-color: #45a049;\r\n        }\r\n        #downloadBtn {\r\n            display: none;\r\n            background-color: #2196F3;\r\n        }\r\n        #sizeInfo {\r\n            margin: 10px 0;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <h1>Image Size Reducer<\/h1>\r\n        \r\n        <div class=\"input-section\">\r\n            <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\r\n            <br>\r\n            <label>Target Size: <\/label>\r\n            <input type=\"number\" id=\"targetSize\" min=\"1\" placeholder=\"KB\">\r\n            <br>\r\n            <button onclick=\"resizeImage()\">Reduce Size<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"sizeInfo\"><\/div>\r\n        <div>\r\n            <img id=\"preview\" alt=\"Preview will appear here\">\r\n        <\/div>\r\n\r\n        <button id=\"downloadBtn\" onclick=\"downloadImage()\">Download Resized Image<\/button>\r\n    <\/div>\r\n\r\n    <script>\r\n        let originalImage = null;\r\n        let resizedImageData = null;\r\n        let originalSize = 0;\r\n\r\n        document.getElementById('imageInput').addEventListener('change', function(e) {\r\n            const file = e.target.files[0];\r\n            if (file) {\r\n                originalSize = Math.round(file.size \/ 1024); \/\/ Convert to KB\r\n                const reader = new FileReader();\r\n                reader.onload = function(event) {\r\n                    const img = new Image();\r\n                    img.onload = function() {\r\n                        originalImage = img;\r\n                        document.getElementById('preview').src = event.target.result;\r\n                        document.getElementById('sizeInfo').textContent = \r\n                            `Original Size: ${originalSize} KB`;\r\n                    }\r\n                    img.src = event.target.result;\r\n                }\r\n                reader.readAsDataURL(file);\r\n            }\r\n        });\r\n\r\n        function resizeImage() {\r\n            if (!originalImage) {\r\n                alert('Please upload an image first!');\r\n                return;\r\n            }\r\n\r\n            const targetSizeKB = parseInt(document.getElementById('targetSize').value);\r\n            if (!targetSizeKB || targetSizeKB <= 0) {\r\n                alert('Please enter a valid target size in KB!');\r\n                return;\r\n            }\r\n\r\n            if (targetSizeKB >= originalSize) {\r\n                alert('Target size must be smaller than original size!');\r\n                return;\r\n            }\r\n\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            \r\n            \/\/ Calculate scaling factor based on size ratio\r\n            const sizeRatio = targetSizeKB \/ originalSize;\r\n            const scale = Math.sqrt(sizeRatio) * 0.9; \/\/ Add 10% buffer\r\n            \r\n            \/\/ Calculate new dimensions\r\n            const width = Math.round(originalImage.width * scale);\r\n            const height = Math.round(originalImage.height * scale);\r\n            \r\n            canvas.width = width;\r\n            canvas.height = height;\r\n            ctx.drawImage(originalImage, 0, 0, width, height);\r\n\r\n            \/\/ Start with moderate quality and adjust if needed\r\n            let quality = 0.7;\r\n            resizedImageData = canvas.toDataURL('image\/jpeg', quality);\r\n            \r\n            \/\/ Convert base64 to approximate KB size\r\n            const sizeKB = Math.round((resizedImageData.length - 'data:image\/jpeg;base64,'.length) * 0.75 \/ 1024);\r\n            \r\n            \/\/ If size is still too large, reduce quality further\r\n            if (sizeKB > targetSizeKB) {\r\n                quality = 0.5;\r\n                resizedImageData = canvas.toDataURL('image\/jpeg', quality);\r\n            }\r\n\r\n            document.getElementById('preview').src = resizedImageData;\r\n            const finalSizeKB = Math.round((resizedImageData.length - 'data:image\/jpeg;base64,'.length) * 0.75 \/ 1024);\r\n            document.getElementById('sizeInfo').textContent = \r\n                `Original Size: ${originalSize} KB | New Size: ${finalSizeKB} KB`;\r\n            document.getElementById('downloadBtn').style.display = 'block';\r\n        }\r\n\r\n        function downloadImage() {\r\n            if (!resizedImageData) {\r\n                alert('Please resize an image first!');\r\n                return;\r\n            }\r\n\r\n            const link = document.createElement('a');\r\n            link.download = 'resized_image.jpg';\r\n            link.href = resizedImageData;\r\n            link.click();\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>All in One Image Tools Image Background Remover Image Rotation Tool Image Compression Tool PDF to Image Convertor Flip Image Tool Check Image Info Color Changer Apply Filter Image Resizer Bulk Image Resizer Crop Image Images to PDF Image Resizer based on Size Bulk Image Resizer based on Size Image Tools Image Tools Upload Image [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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-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-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-gradient":""}},"ast-content-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-gradient":""},"tablet":{"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-gradient":""},"mobile":{"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-gradient":""}},"footnotes":""},"class_list":["post-1956","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/pages\/1956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/comments?post=1956"}],"version-history":[{"count":139,"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/pages\/1956\/revisions"}],"predecessor-version":[{"id":2122,"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/pages\/1956\/revisions\/2122"}],"wp:attachment":[{"href":"https:\/\/sbassandaur.com\/pa\/wp-json\/wp\/v2\/media?parent=1956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}