{"id":108,"date":"2026-06-25T09:32:19","date_gmt":"2026-06-25T09:32:19","guid":{"rendered":"https:\/\/toolskit.site\/?page_id=108"},"modified":"2026-06-25T09:37:02","modified_gmt":"2026-06-25T09:37:02","slug":"108-2","status":"publish","type":"page","link":"https:\/\/toolskit.site\/index.php\/108-2\/","title":{"rendered":"Advanced Professional Image Resizer"},"content":{"rendered":"<style>\r\n:root {\r\n  --primary: #6366f1;\r\n  --primary-dark: #4f46e5;\r\n  --secondary: #ec4899;\r\n  --success: #10b981;\r\n  --warning: #f59e0b;\r\n  --danger: #ef4444;\r\n  --dark: #0f172a;\r\n  --darker: #020617;\r\n  --card: #1e293b;\r\n  --border: #334155;\r\n  --text: #e2e8f0;\r\n  --text-muted: #94a3b8;\r\n}\r\n\r\n#pro-ir * {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#pro-ir {\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n  padding: 40px 20px;\r\n  background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);\r\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n  color: var(--text);\r\n  min-height: 100vh;\r\n}\r\n\r\n#pro-ir .header {\r\n  text-align: center;\r\n  margin-bottom: 40px;\r\n  animation: fadeInDown 0.6s ease;\r\n}\r\n\r\n#pro-ir .header h1 {\r\n  font-size: 48px;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  margin-bottom: 12px;\r\n  letter-spacing: -1px;\r\n}\r\n\r\n#pro-ir .header p {\r\n  color: var(--text-muted);\r\n  font-size: 18px;\r\n}\r\n\r\n#pro-ir .container {\r\n  display: grid;\r\n  grid-template-columns: 400px 1fr;\r\n  gap: 30px;\r\n  animation: fadeIn 0.8s ease;\r\n}\r\n\r\n#pro-ir .sidebar {\r\n  background: var(--card);\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n  height: fit-content;\r\n}\r\n\r\n#pro-ir .main-content {\r\n  background: var(--card);\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n}\r\n\r\n#pro-ir .upload-zone {\r\n  border: 3px dashed var(--border);\r\n  border-radius: 16px;\r\n  padding: 60px 30px;\r\n  text-align: center;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  background: rgba(99, 102, 241, 0.05);\r\n  margin-bottom: 25px;\r\n}\r\n\r\n#pro-ir .upload-zone:hover,\r\n#pro-ir .upload-zone.dragover {\r\n  border-color: var(--primary);\r\n  background: rgba(99, 102, 241, 0.1);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n#pro-ir .upload-zone svg {\r\n  width: 64px;\r\n  height: 64px;\r\n  margin-bottom: 16px;\r\n  color: var(--primary);\r\n}\r\n\r\n#pro-ir .upload-zone h3 {\r\n  font-size: 20px;\r\n  margin-bottom: 8px;\r\n  color: var(--text);\r\n}\r\n\r\n#pro-ir .upload-zone p {\r\n  color: var(--text-muted);\r\n  font-size: 14px;\r\n}\r\n\r\n#pro-ir .section {\r\n  margin-bottom: 25px;\r\n}\r\n\r\n#pro-ir .section-title {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: var(--text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n#pro-ir .input-group {\r\n  margin-bottom: 16px;\r\n}\r\n\r\n#pro-ir .input-group label {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  font-size: 14px;\r\n  color: var(--text);\r\n  margin-bottom: 8px;\r\n  font-weight: 500;\r\n}\r\n\r\n#pro-ir .input-group label span {\r\n  color: var(--primary);\r\n  font-weight: 700;\r\n}\r\n\r\n#pro-ir input[type=\"range\"] {\r\n  width: 100%;\r\n  height: 6px;\r\n  border-radius: 3px;\r\n  background: var(--border);\r\n  outline: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n#pro-ir input[type=\"range\"]::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  cursor: pointer;\r\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n#pro-ir input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n  transform: scale(1.2);\r\n}\r\n\r\n#pro-ir input[type=\"number\"],\r\n#pro-ir select,\r\n#pro-ir input[type=\"text\"] {\r\n  width: 100%;\r\n  padding: 12px 16px;\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 10px;\r\n  color: var(--text);\r\n  font-size: 14px;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-ir input:focus,\r\n#pro-ir select:focus {\r\n  outline: none;\r\n  border-color: var(--primary);\r\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\r\n}\r\n\r\n#pro-ir .dimension-inputs {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto 1fr;\r\n  gap: 12px;\r\n  align-items: center;\r\n}\r\n\r\n#pro-ir .lock-btn {\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 10px;\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  color: var(--primary);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: all 0.3s ease;\r\n  font-size: 20px;\r\n}\r\n\r\n#pro-ir .lock-btn:hover {\r\n  background: var(--primary);\r\n  color: white;\r\n}\r\n\r\n#pro-ir .lock-btn.unlocked {\r\n  color: var(--text-muted);\r\n}\r\n\r\n#pro-ir .preset-sizes {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n#pro-ir .preset-btn {\r\n  padding: 10px;\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 8px;\r\n  color: var(--text);\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  text-align: center;\r\n}\r\n\r\n#pro-ir .preset-btn:hover {\r\n  background: var(--primary);\r\n  border-color: var(--primary);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n#pro-ir .btn {\r\n  width: 100%;\r\n  padding: 16px;\r\n  border: none;\r\n  border-radius: 12px;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n#pro-ir .btn-primary {\r\n  background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n  color: white;\r\n  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);\r\n}\r\n\r\n#pro-ir .btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);\r\n}\r\n\r\n#pro-ir .btn-secondary {\r\n  background: var(--darker);\r\n  color: var(--text);\r\n  border: 1px solid var(--border);\r\n}\r\n\r\n#pro-ir .btn-secondary:hover {\r\n  background: var(--border);\r\n}\r\n\r\n#pro-ir .btn:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  transform: none !important;\r\n}\r\n\r\n#pro-ir .stats-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 12px;\r\n  margin-top: 20px;\r\n}\r\n\r\n#pro-ir .stat-card {\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 12px;\r\n  padding: 16px;\r\n  text-align: center;\r\n}\r\n\r\n#pro-ir .stat-value {\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  color: var(--primary);\r\n  margin-bottom: 4px;\r\n}\r\n\r\n#pro-ir .stat-label {\r\n  font-size: 12px;\r\n  color: var(--text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n#pro-ir .preview-container {\r\n  background: var(--darker);\r\n  border-radius: 16px;\r\n  min-height: 600px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n  border: 1px solid var(--border);\r\n}\r\n\r\n#pro-ir .preview-container img {\r\n  max-width: 100%;\r\n  max-height: 600px;\r\n  object-fit: contain;\r\n  border-radius: 8px;\r\n}\r\n\r\n#pro-ir .preview-placeholder {\r\n  text-align: center;\r\n  color: var(--text-muted);\r\n}\r\n\r\n#pro-ir .preview-placeholder svg {\r\n  width: 120px;\r\n  height: 120px;\r\n  margin-bottom: 20px;\r\n  opacity: 0.3;\r\n}\r\n\r\n#pro-ir .toast {\r\n  position: fixed;\r\n  bottom: 30px;\r\n  right: 30px;\r\n  background: var(--success);\r\n  color: white;\r\n  padding: 16px 24px;\r\n  border-radius: 12px;\r\n  box-shadow: 0 10px 40px rgba(0,0,0,0.3);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  transform: translateX(400px);\r\n  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n  z-index: 10000;\r\n}\r\n\r\n#pro-ir .toast.show {\r\n  transform: translateX(0);\r\n}\r\n\r\n#pro-ir .toast.error {\r\n  background: var(--danger);\r\n}\r\n\r\n#pro-ir .loading-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: rgba(0,0,0,0.8);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 100;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n#pro-ir .loading-overlay.show {\r\n  opacity: 1;\r\n  pointer-events: all;\r\n}\r\n\r\n#pro-ir .spinner {\r\n  width: 60px;\r\n  height: 60px;\r\n  border: 4px solid var(--border);\r\n  border-top-color: var(--primary);\r\n  border-radius: 50%;\r\n  animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n@keyframes fadeInDown {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  #pro-ir .container {\r\n    grid-template-columns: 1fr;\r\n  }\r\n  \r\n  #pro-ir .header h1 {\r\n    font-size: 36px;\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  #pro-ir {\r\n    padding: 20px 10px;\r\n  }\r\n  \r\n  #pro-ir .header h1 {\r\n    font-size: 28px;\r\n  }\r\n  \r\n  #pro-ir .sidebar,\r\n  #pro-ir .main-content {\r\n    padding: 20px;\r\n  }\r\n  \r\n  #pro-ir .preset-sizes {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pro-ir\">\r\n  <div class=\"header\">\r\n    <h1>\ud83c\udfa8 Professional Image Resizer<\/h1>\r\n    <p>Industry-grade image editing with advanced features<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"container\">\r\n    <div class=\"sidebar\">\r\n      <div class=\"upload-zone\" id=\"upload-zone\">\r\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"\/>\r\n        <\/svg>\r\n        <h3>Drop image here or click to upload<\/h3>\r\n        <p>Supports JPG, PNG, WebP, GIF<\/p>\r\n        <input type=\"file\" id=\"file-input\" accept=\"image\/*\" style=\"display:none;\">\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83d\udcd0 Quick Presets<\/div>\r\n        <div class=\"preset-sizes\">\r\n          <button class=\"preset-btn\" onclick=\"setPreset(1080, 1080)\">Instagram<br>1080\u00d71080<\/button>\r\n          <button class=\"preset-btn\" onclick=\"setPreset(1200, 630)\">Facebook<br>1200\u00d7630<\/button>\r\n          <button class=\"preset-btn\" onclick=\"setPreset(1500, 500)\">Twitter<br>1500\u00d7500<\/button>\r\n          <button class=\"preset-btn\" onclick=\"setPreset(1920, 1080)\">HD<br>1920\u00d71080<\/button>\r\n          <button class=\"preset-btn\" onclick=\"setPreset(800, 600)\">Web<br>800\u00d7600<\/button>\r\n          <button class=\"preset-btn\" onclick=\"setPreset(400, 400)\">Thumbnail<br>400\u00d7400<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83d\udccf Dimensions<\/div>\r\n        <div class=\"dimension-inputs\">\r\n          <div>\r\n            <label>Width (px)<\/label>\r\n            <input type=\"number\" id=\"width-input\" placeholder=\"Width\" disabled>\r\n          <\/div>\r\n          <button class=\"lock-btn\" id=\"lock-btn\" onclick=\"toggleLock()\">\ud83d\udd12<\/button>\r\n          <div>\r\n            <label>Height (px)<\/label>\r\n            <input type=\"number\" id=\"height-input\" placeholder=\"Height\" disabled>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83c\udf9b\ufe0f Adjustments<\/div>\r\n        <div class=\"input-group\">\r\n          <label>Quality <span id=\"quality-val\">90%<\/span><\/label>\r\n          <input type=\"range\" id=\"quality\" min=\"10\" max=\"100\" value=\"90\" disabled>\r\n        <\/div>\r\n        <div class=\"input-group\">\r\n          <label>Brightness <span id=\"brightness-val\">100%<\/span><\/label>\r\n          <input type=\"range\" id=\"brightness\" min=\"0\" max=\"200\" value=\"100\" disabled>\r\n        <\/div>\r\n        <div class=\"input-group\">\r\n          <label>Contrast <span id=\"contrast-val\">100%<\/span><\/label>\r\n          <input type=\"range\" id=\"contrast\" min=\"0\" max=\"200\" value=\"100\" disabled>\r\n        <\/div>\r\n        <div class=\"input-group\">\r\n          <label>Saturation <span id=\"saturation-val\">100%<\/span><\/label>\r\n          <input type=\"range\" id=\"saturation\" min=\"0\" max=\"200\" value=\"100\" disabled>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83d\udd04 Transform<\/div>\r\n        <div class=\"input-group\">\r\n          <label>Rotation<\/label>\r\n          <select id=\"rotation\" disabled>\r\n            <option value=\"0\">0\u00b0<\/option>\r\n            <option value=\"90\">90\u00b0<\/option>\r\n            <option value=\"180\">180\u00b0<\/option>\r\n            <option value=\"270\">270\u00b0<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"input-group\">\r\n          <label>Flip<\/label>\r\n          <select id=\"flip\" disabled>\r\n            <option value=\"none\">None<\/option>\r\n            <option value=\"horizontal\">Horizontal<\/option>\r\n            <option value=\"vertical\">Vertical<\/option>\r\n            <option value=\"both\">Both<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83d\udcbe Output<\/div>\r\n        <div class=\"input-group\">\r\n          <label>Format<\/label>\r\n          <select id=\"format\" disabled>\r\n            <option value=\"image\/jpeg\">JPEG<\/option>\r\n            <option value=\"image\/png\">PNG<\/option>\r\n            <option value=\"image\/webp\">WebP<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"input-group\">\r\n          <label>Watermark Text<\/label>\r\n          <input type=\"text\" id=\"watermark\" placeholder=\"Optional watermark...\" disabled>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <button class=\"btn btn-primary\" id=\"download-btn\" disabled onclick=\"downloadImage()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\/>\r\n        <\/svg>\r\n        Download Image\r\n      <\/button>\r\n      <button class=\"btn btn-secondary\" id=\"reset-btn\" disabled onclick=\"resetAll()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/>\r\n        <\/svg>\r\n        Reset to Original\r\n      <\/button>\r\n\r\n      <div class=\"stats-grid\">\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-value\" id=\"original-size\">-<\/div>\r\n          <div class=\"stat-label\">Original<\/div>\r\n        <\/div>\r\n        <div class=\"stat-card\">\r\n          <div class=\"stat-value\" id=\"new-size\">-<\/div>\r\n          <div class=\"stat-label\">New Size<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"preview-container\" id=\"preview-container\">\r\n        <div class=\"preview-placeholder\" id=\"placeholder\">\r\n          <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\r\n          <\/svg>\r\n          <h3>Your image will appear here<\/h3>\r\n          <p>Upload an image to get started<\/p>\r\n        <\/div>\r\n        <div class=\"loading-overlay\" id=\"loading\">\r\n          <div class=\"spinner\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"toast\" id=\"toast\">\r\n  <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n  <\/svg>\r\n  <span id=\"toast-message\">Success!<\/span>\r\n<\/div>\r\n\r\n<script>\r\nvar img = null;\r\nvar originalWidth = 0;\r\nvar originalHeight = 0;\r\nvar aspectLocked = true;\r\nvar originalFileSize = 0;\r\n\r\nvar uploadZone = document.getElementById('upload-zone');\r\nvar fileInput = document.getElementById('file-input');\r\nvar previewContainer = document.getElementById('preview-container');\r\nvar placeholder = document.getElementById('placeholder');\r\nvar loading = document.getElementById('loading');\r\n\r\nuploadZone.addEventListener('click', function() {\r\n  fileInput.click();\r\n});\r\n\r\nuploadZone.addEventListener('dragover', function(e) {\r\n  e.preventDefault();\r\n  uploadZone.classList.add('dragover');\r\n});\r\n\r\nuploadZone.addEventListener('dragleave', function() {\r\n  uploadZone.classList.remove('dragover');\r\n});\r\n\r\nuploadZone.addEventListener('drop', function(e) {\r\n  e.preventDefault();\r\n  uploadZone.classList.remove('dragover');\r\n  if (e.dataTransfer.files[0]) {\r\n    handleFile(e.dataTransfer.files[0]);\r\n  }\r\n});\r\n\r\nfileInput.addEventListener('change', function(e) {\r\n  if (e.target.files[0]) {\r\n    handleFile(e.target.files[0]);\r\n  }\r\n});\r\n\r\nfunction handleFile(file) {\r\n  if (!file.type.startsWith('image\/')) {\r\n    showToast('Please select a valid image file', 'error');\r\n    return;\r\n  }\r\n\r\n  originalFileSize = file.size;\r\n  document.getElementById('original-size').textContent = formatBytes(file.size);\r\n  \r\n  loading.classList.add('show');\r\n  \r\n  var reader = new FileReader();\r\n  reader.onload = function(e) {\r\n    var image = new Image();\r\n    image.onload = function() {\r\n      img = image;\r\n      originalWidth = image.width;\r\n      originalHeight = image.height;\r\n      \r\n      document.getElementById('width-input').value = originalWidth;\r\n      document.getElementById('height-input').value = originalHeight;\r\n      \r\n      enableControls();\r\n      updatePreview();\r\n      \r\n      placeholder.style.display = 'none';\r\n      loading.classList.remove('show');\r\n      \r\n      showToast('Image loaded successfully!');\r\n    };\r\n    image.src = e.target.result;\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\nfunction enableControls() {\r\n  var controls = ['width-input', 'height-input', 'quality', 'brightness', 'contrast', 'saturation', 'rotation', 'flip', 'format', 'watermark', 'download-btn', 'reset-btn'];\r\n  controls.forEach(function(id) {\r\n    document.getElementById(id).disabled = false;\r\n  });\r\n}\r\n\r\nfunction updatePreview() {\r\n  if (!img) return;\r\n\r\n  var width = parseInt(document.getElementById('width-input').value) || originalWidth;\r\n  var height = parseInt(document.getElementById('height-input').value) || originalHeight;\r\n  var quality = document.getElementById('quality').value \/ 100;\r\n  var brightness = document.getElementById('brightness').value;\r\n  var contrast = document.getElementById('contrast').value;\r\n  var saturation = document.getElementById('saturation').value;\r\n  var rotation = parseInt(document.getElementById('rotation').value);\r\n  var flip = document.getElementById('flip').value;\r\n  var format = document.getElementById('format').value;\r\n  var watermark = document.getElementById('watermark').value;\r\n\r\n  var canvas = document.createElement('canvas');\r\n  var ctx = canvas.getContext('2d');\r\n\r\n  if (rotation === 90 || rotation === 270) {\r\n    canvas.width = height;\r\n    canvas.height = width;\r\n  } else {\r\n    canvas.width = width;\r\n    canvas.height = height;\r\n  }\r\n\r\n  ctx.filter = 'brightness(' + brightness + '%) contrast(' + contrast + '%) saturate(' + saturation + '%)';\r\n\r\n  ctx.translate(canvas.width \/ 2, canvas.height \/ 2);\r\n  ctx.rotate(rotation * Math.PI \/ 180);\r\n\r\n  if (flip === 'horizontal' || flip === 'both') {\r\n    ctx.scale(-1, 1);\r\n  }\r\n  if (flip === 'vertical' || flip === 'both') {\r\n    ctx.scale(1, -1);\r\n  }\r\n\r\n  ctx.drawImage(img, -width \/ 2, -height \/ 2, width, height);\r\n\r\n  if (watermark) {\r\n    ctx.font = Math.max(20, width \/ 20) + 'px Arial';\r\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';\r\n    ctx.textAlign = 'center';\r\n    ctx.fillText(watermark, 0, 0);\r\n  }\r\n\r\n  var previewImg = document.createElement('img');\r\n  previewImg.src = canvas.toDataURL(format, quality);\r\n  \r\n  var existingImg = previewContainer.querySelector('img');\r\n  if (existingImg) {\r\n    existingImg.remove();\r\n  }\r\n  previewContainer.appendChild(previewImg);\r\n\r\n  canvas.toBlob(function(blob) {\r\n    document.getElementById('new-size').textContent = formatBytes(blob.size);\r\n  }, format, quality);\r\n}\r\n\r\ndocument.getElementById('width-input').addEventListener('input', function() {\r\n  if (aspectLocked && img) {\r\n    var ratio = originalHeight \/ originalWidth;\r\n    document.getElementById('height-input').value = Math.round(this.value * ratio);\r\n  }\r\n  updatePreview();\r\n});\r\n\r\ndocument.getElementById('height-input').addEventListener('input', function() {\r\n  if (aspectLocked && img) {\r\n    var ratio = originalWidth \/ originalHeight;\r\n    document.getElementById('width-input').value = Math.round(this.value * ratio);\r\n  }\r\n  updatePreview();\r\n});\r\n\r\ndocument.getElementById('quality').addEventListener('input', function() {\r\n  document.getElementById('quality-val').textContent = this.value + '%';\r\n  updatePreview();\r\n});\r\n\r\ndocument.getElementById('brightness').addEventListener('input', function() {\r\n  document.getElementById('brightness-val').textContent = this.value + '%';\r\n  updatePreview();\r\n});\r\n\r\ndocument.getElementById('contrast').addEventListener('input', function() {\r\n  document.getElementById('contrast-val').textContent = this.value + '%';\r\n  updatePreview();\r\n});\r\n\r\ndocument.getElementById('saturation').addEventListener('input', function() {\r\n  document.getElementById('saturation-val').textContent = this.value + '%';\r\n  updatePreview();\r\n});\r\n\r\ndocument.getElementById('rotation').addEventListener('change', updatePreview);\r\ndocument.getElementById('flip').addEventListener('change', updatePreview);\r\ndocument.getElementById('format').addEventListener('change', updatePreview);\r\ndocument.getElementById('watermark').addEventListener('input', updatePreview);\r\n\r\nfunction toggleLock() {\r\n  aspectLocked = !aspectLocked;\r\n  var btn = document.getElementById('lock-btn');\r\n  btn.textContent = aspectLocked ? '\ud83d\udd12' : '\ud83d\udd13';\r\n  btn.classList.toggle('unlocked', !aspectLocked);\r\n}\r\n\r\nfunction setPreset(w, h) {\r\n  document.getElementById('width-input').value = w;\r\n  document.getElementById('height-input').value = h;\r\n  aspectLocked = false;\r\n  document.getElementById('lock-btn').textContent = '\ud83d\udd13';\r\n  document.getElementById('lock-btn').classList.add('unlocked');\r\n  updatePreview();\r\n  showToast('Preset applied: ' + w + '\u00d7' + h);\r\n}\r\n\r\nfunction downloadImage() {\r\n  if (!img) return;\r\n\r\n  loading.classList.add('show');\r\n\r\n  var width = parseInt(document.getElementById('width-input').value) || originalWidth;\r\n  var height = parseInt(document.getElementById('height-input').value) || originalHeight;\r\n  var quality = document.getElementById('quality').value \/ 100;\r\n  var brightness = document.getElementById('brightness').value;\r\n  var contrast = document.getElementById('contrast').value;\r\n  var saturation = document.getElementById('saturation').value;\r\n  var rotation = parseInt(document.getElementById('rotation').value);\r\n  var flip = document.getElementById('flip').value;\r\n  var format = document.getElementById('format').value;\r\n  var watermark = document.getElementById('watermark').value;\r\n  var ext = format.split('\/')[1];\r\n\r\n  var canvas = document.createElement('canvas');\r\n  var ctx = canvas.getContext('2d');\r\n\r\n  if (rotation === 90 || rotation === 270) {\r\n    canvas.width = height;\r\n    canvas.height = width;\r\n  } else {\r\n    canvas.width = width;\r\n    canvas.height = height;\r\n  }\r\n\r\n  ctx.filter = 'brightness(' + brightness + '%) contrast(' + contrast + '%) saturate(' + saturation + '%)';\r\n\r\n  ctx.translate(canvas.width \/ 2, canvas.height \/ 2);\r\n  ctx.rotate(rotation * Math.PI \/ 180);\r\n\r\n  if (flip === 'horizontal' || flip === 'both') {\r\n    ctx.scale(-1, 1);\r\n  }\r\n  if (flip === 'vertical' || flip === 'both') {\r\n    ctx.scale(1, -1);\r\n  }\r\n\r\n  ctx.drawImage(img, -width \/ 2, -height \/ 2, width, height);\r\n\r\n  if (watermark) {\r\n    ctx.font = Math.max(20, width \/ 20) + 'px Arial';\r\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';\r\n    ctx.textAlign = 'center';\r\n    ctx.fillText(watermark, 0, 0);\r\n  }\r\n\r\n  canvas.toBlob(function(blob) {\r\n    var url = URL.createObjectURL(blob);\r\n    var a = document.createElement('a');\r\n    a.href = url;\r\n    a.download = 'resized-image.' + ext;\r\n    a.click();\r\n    URL.revokeObjectURL(url);\r\n    \r\n    loading.classList.remove('show');\r\n    showToast('Image downloaded successfully!');\r\n  }, format, quality);\r\n}\r\n\r\nfunction resetAll() {\r\n  if (!img) return;\r\n\r\n  document.getElementById('width-input').value = originalWidth;\r\n  document.getElementById('height-input').value = originalHeight;\r\n  document.getElementById('quality').value = 90;\r\n  document.getElementById('brightness').value = 100;\r\n  document.getElementById('contrast').value = 100;\r\n  document.getElementById('saturation').value = 100;\r\n  document.getElementById('rotation').value = 0;\r\n  document.getElementById('flip').value = 'none';\r\n  document.getElementById('watermark').value = '';\r\n\r\n  document.getElementById('quality-val').textContent = '90%';\r\n  document.getElementById('brightness-val').textContent = '100%';\r\n  document.getElementById('contrast-val').textContent = '100%';\r\n  document.getElementById('saturation-val').textContent = '100%';\r\n\r\n  aspectLocked = true;\r\n  document.getElementById('lock-btn').textContent = '\ud83d\udd12';\r\n  document.getElementById('lock-btn').classList.remove('unlocked');\r\n\r\n  updatePreview();\r\n  showToast('Reset to original!');\r\n}\r\n\r\nfunction formatBytes(bytes) {\r\n  if (bytes === 0) return '0 B';\r\n  var k = 1024;\r\n  var sizes = ['B', 'KB', 'MB', 'GB'];\r\n  var i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n  return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n}\r\n\r\nfunction showToast(message, type) {\r\n  var toast = document.getElementById('toast');\r\n  var toastMessage = document.getElementById('toast-message');\r\n  \r\n  toastMessage.textContent = message;\r\n  toast.classList.add('show');\r\n  \r\n  if (type === 'error') {\r\n    toast.classList.add('error');\r\n  } else {\r\n    toast.classList.remove('error');\r\n  }\r\n  \r\n  setTimeout(function() {\r\n    toast.classList.remove('show');\r\n  }, 3000);\r\n}\r\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-108","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":2,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/108\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/108\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/media?parent=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}