{"id":692,"date":"2026-07-16T11:07:44","date_gmt":"2026-07-16T11:07:44","guid":{"rendered":"https:\/\/vikassrivastava.in\/academy\/?page_id=692"},"modified":"2026-07-16T11:08:31","modified_gmt":"2026-07-16T11:08:31","slug":"image-screenshot-studio","status":"publish","type":"page","link":"https:\/\/vikassrivastava.in\/academy\/image-screenshot-studio\/","title":{"rendered":"Image &amp; Screenshot Studio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"692\" class=\"elementor elementor-692\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11c5284 e-con e-atomic-element e-flexbox-base e-39c6bf8 \" data-id=\"11c5284\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"11c5284\">\n    \t\t<div class=\"elementor-element elementor-element-c074f41 elementor-widget elementor-widget-html\" data-id=\"c074f41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Image & Screenshot Studio \u2013 WordPress-ready single HTML file -->\r\n<div id=\"iss-app\" class=\"iss-app\">\r\n  <header class=\"iss-header\">\r\n    <div class=\"iss-brand\">\r\n      <div class=\"iss-logo\">IS<\/div>\r\n      <div>\r\n        <div class=\"iss-brand-title\">Image & Screenshot Studio<\/div>\r\n        <div class=\"iss-brand-sub\">Edit, convert and optimize images securely in your browser<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"iss-actions\">\r\n      <button id=\"iss-theme\" class=\"iss-icon-btn\" type=\"button\" aria-label=\"Toggle dark mode\">\u25d0<\/button>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <section class=\"iss-hero\">\r\n    <span class=\"iss-pill\">100% Browser Based<\/span>\r\n    <h1>Professional Image Tools in One Place<\/h1>\r\n    <p>Resize, compress, convert, crop, watermark, annotate and compare images without uploading them to a server.<\/p>\r\n  <\/section>\r\n\r\n  <main class=\"iss-main\">\r\n    <div class=\"iss-search-wrap\">\r\n      <input id=\"iss-search\" class=\"iss-search\" type=\"search\" placeholder=\"Search image tools\u2026\">\r\n    <\/div>\r\n\r\n    <div id=\"iss-tools\" class=\"iss-tools\">\r\n      <button class=\"iss-tool is-active\" data-tool=\"resize\" data-search=\"resize dimensions width height\">\r\n        <span>\u2194<\/span><strong>Resize Image<\/strong><small>Change width and height<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"compress\" data-search=\"compress reduce size quality\">\r\n        <span>\u21e3<\/span><strong>Compress Image<\/strong><small>Reduce image file size<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"convert\" data-search=\"convert jpg png webp\">\r\n        <span>\u21c4<\/span><strong>Convert Format<\/strong><small>JPG, PNG and WEBP<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"crop\" data-search=\"crop trim screenshot\">\r\n        <span>\u2317<\/span><strong>Crop Image<\/strong><small>Select and crop an area<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"watermark\" data-search=\"watermark logo text\">\r\n        <span>W<\/span><strong>Add Watermark<\/strong><small>Protect images with text<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"annotate\" data-search=\"add text annotation screenshot\">\r\n        <span>T<\/span><strong>Add Text<\/strong><small>Annotate screenshots<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"blur\" data-search=\"blur hide private sensitive\">\r\n        <span>\u25eb<\/span><strong>Blur Area<\/strong><small>Hide sensitive content<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"effects\" data-search=\"grayscale invert brightness contrast\">\r\n        <span>\u25d0<\/span><strong>Image Effects<\/strong><small>Adjust image appearance<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"rotate\" data-search=\"rotate flip mirror\">\r\n        <span>\u21bb<\/span><strong>Rotate & Flip<\/strong><small>Correct orientation<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"signature\" data-search=\"signature draw sign transparent\">\r\n        <span>\u270e<\/span><strong>Signature Maker<\/strong><small>Create a PNG signature<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"compare\" data-search=\"compare before after slider\">\r\n        <span>\u21c6<\/span><strong>Compare Images<\/strong><small>Before and after comparison<\/small>\r\n      <\/button>\r\n      <button class=\"iss-tool\" data-tool=\"passport\" data-search=\"passport photo id background\">\r\n        <span>\u25a3<\/span><strong>Passport Photo<\/strong><small>Create ID photo sheets<\/small>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <section class=\"iss-workspace\">\r\n      <div class=\"iss-workspace-head\">\r\n        <div>\r\n          <h2 id=\"iss-title\">Resize Image<\/h2>\r\n          <p id=\"iss-desc\">Resize an image while preserving its aspect ratio.<\/p>\r\n        <\/div>\r\n        <button id=\"iss-reset\" class=\"iss-btn iss-btn-light\" type=\"button\">Reset<\/button>\r\n      <\/div>\r\n\r\n      <div id=\"iss-alert\" class=\"iss-alert\" role=\"alert\" hidden><\/div>\r\n\r\n      <div id=\"iss-upload\" class=\"iss-upload\" tabindex=\"0\" role=\"button\">\r\n        <div class=\"iss-upload-icon\">\u21e7<\/div>\r\n        <h3>Drop image here<\/h3>\r\n        <p>or click to browse from your device<\/p>\r\n        <button class=\"iss-btn iss-btn-primary\" type=\"button\">Choose Image<\/button>\r\n        <small id=\"iss-supported\">Supported: JPG, PNG and WEBP \u2022 Maximum 25 MB<\/small>\r\n        <input id=\"iss-file\" type=\"file\" accept=\"image\/jpeg,image\/png,image\/webp\" hidden>\r\n      <\/div>\r\n\r\n      <div id=\"iss-file-info\" class=\"iss-file-info\" hidden><\/div>\r\n\r\n      <div class=\"iss-editor-grid\">\r\n        <div class=\"iss-preview-panel\">\r\n          <div class=\"iss-canvas-wrap\" id=\"iss-canvas-wrap\">\r\n            <canvas id=\"iss-canvas\"><\/canvas>\r\n            <div id=\"iss-crop-box\" class=\"iss-crop-box\" hidden><\/div>\r\n          <\/div>\r\n          <div id=\"iss-compare-wrap\" class=\"iss-compare-wrap\" hidden>\r\n            <div class=\"iss-compare-stage\">\r\n              <img id=\"iss-compare-before\" alt=\"Before image\">\r\n              <div id=\"iss-compare-after-wrap\" class=\"iss-compare-after-wrap\">\r\n                <img id=\"iss-compare-after\" alt=\"After image\">\r\n              <\/div>\r\n              <div id=\"iss-compare-line\" class=\"iss-compare-line\"><\/div>\r\n            <\/div>\r\n            <input id=\"iss-compare-range\" type=\"range\" min=\"0\" max=\"100\" value=\"50\">\r\n          <\/div>\r\n          <div id=\"iss-signature-wrap\" class=\"iss-signature-wrap\" hidden>\r\n            <canvas id=\"iss-signature-canvas\" width=\"900\" height=\"300\"><\/canvas>\r\n            <div class=\"iss-signature-actions\">\r\n              <button id=\"iss-clear-signature\" class=\"iss-btn iss-btn-light\" type=\"button\">Clear Signature<\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <aside id=\"iss-options\" class=\"iss-options\"><\/aside>\r\n      <\/div>\r\n\r\n      <div class=\"iss-action-row\">\r\n        <button id=\"iss-process\" class=\"iss-btn iss-btn-primary iss-btn-large\" type=\"button\" disabled>Process Image<\/button>\r\n        <button id=\"iss-download\" class=\"iss-btn iss-btn-success iss-btn-large\" type=\"button\" disabled>Download Result<\/button>\r\n      <\/div>\r\n\r\n      <div id=\"iss-status\" class=\"iss-status\"><\/div>\r\n    <\/section>\r\n\r\n    <section class=\"iss-benefits\">\r\n      <article><span>\ud83d\udd12<\/span><h3>Private<\/h3><p>Images are processed locally in your browser.<\/p><\/article>\r\n      <article><span>\u26a1<\/span><h3>Fast<\/h3><p>No registration or server upload is required.<\/p><\/article>\r\n      <article><span>\ud83d\udcf1<\/span><h3>Responsive<\/h3><p>Works on desktop, tablet and modern mobile browsers.<\/p><\/article>\r\n    <\/section>\r\n  <\/main>\r\n<\/div>\r\n\r\n<style>\r\n#iss-app{\r\n  --iss-primary:#5b3df5;--iss-primary2:#7d68ff;--iss-bg:#f5f7fc;--iss-card:#fff;--iss-card2:#f0f3f8;\r\n  --iss-text:#172033;--iss-muted:#667085;--iss-border:#dfe4ee;--iss-success:#16885f;--iss-danger:#c83b4d;\r\n  --iss-shadow:0 16px 45px rgba(32,44,78,.10);\r\n  color:var(--iss-text);background:var(--iss-bg);font-family:Inter,system-ui,-apple-system,\"Segoe UI\",sans-serif;\r\n  border-radius:22px;overflow:hidden;line-height:1.5\r\n}\r\n#iss-app.iss-dark{--iss-bg:#0f131c;--iss-card:#171c27;--iss-card2:#222937;--iss-text:#f3f5fa;--iss-muted:#a9b2c3;--iss-border:#30394a;--iss-shadow:0 16px 45px rgba(0,0,0,.25)}\r\n#iss-app *{box-sizing:border-box}\r\n#iss-app button,#iss-app input,#iss-app select{font:inherit}\r\n#iss-app button{cursor:pointer}\r\n#iss-app .iss-header{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,52px);background:var(--iss-card);border-bottom:1px solid var(--iss-border)}\r\n#iss-app .iss-brand{display:flex;align-items:center;gap:12px}\r\n#iss-app .iss-logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--iss-primary),#ff5470)}\r\n#iss-app .iss-brand-title{font-size:19px;font-weight:850}\r\n#iss-app .iss-brand-sub{font-size:12px;color:var(--iss-muted)}\r\n#iss-app .iss-icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--iss-border);background:var(--iss-card2);color:var(--iss-text)}\r\n#iss-app .iss-hero{text-align:center;padding:58px 18px 82px;background:radial-gradient(circle at 15% 20%,rgba(91,61,245,.14),transparent 28%),radial-gradient(circle at 85% 30%,rgba(255,84,112,.12),transparent 25%),var(--iss-card)}\r\n#iss-app .iss-pill{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(91,61,245,.12);color:var(--iss-primary);font-size:12px;font-weight:800;text-transform:uppercase}\r\n#iss-app .iss-hero h1{font-size:clamp(34px,6vw,62px);line-height:1.08;margin:18px auto 14px;max-width:900px;letter-spacing:-.04em}\r\n#iss-app .iss-hero p{max-width:760px;margin:auto;color:var(--iss-muted);font-size:clamp(16px,2vw,20px)}\r\n#iss-app .iss-main{max-width:1240px;margin:auto;padding:30px clamp(12px,3vw,34px) 48px}\r\n#iss-app .iss-search-wrap{max-width:650px;margin:-57px auto 28px}\r\n#iss-app .iss-search{width:100%;height:58px;border:1px solid var(--iss-border);border-radius:16px;background:var(--iss-card);color:var(--iss-text);padding:0 20px;box-shadow:var(--iss-shadow);outline:none}\r\n#iss-app .iss-search:focus{border-color:var(--iss-primary);box-shadow:0 0 0 4px rgba(91,61,245,.13)}\r\n#iss-app .iss-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:28px}\r\n#iss-app .iss-tool{min-height:145px;text-align:left;padding:17px;border-radius:16px;border:1px solid var(--iss-border);background:var(--iss-card);color:var(--iss-text);transition:.2s}\r\n#iss-app .iss-tool:hover{transform:translateY(-3px);border-color:var(--iss-primary);box-shadow:var(--iss-shadow)}\r\n#iss-app .iss-tool.is-active{border-color:var(--iss-primary);box-shadow:0 0 0 3px rgba(91,61,245,.12)}\r\n#iss-app .iss-tool span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(91,61,245,.11);color:var(--iss-primary);font-weight:900;font-size:21px;margin-bottom:12px}\r\n#iss-app .iss-tool strong,#iss-app .iss-tool small{display:block}\r\n#iss-app .iss-tool small{margin-top:5px;color:var(--iss-muted);font-size:12px}\r\n#iss-app .iss-workspace{background:var(--iss-card);border:1px solid var(--iss-border);border-radius:22px;padding:clamp(18px,3vw,30px);box-shadow:var(--iss-shadow)}\r\n#iss-app .iss-workspace-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px}\r\n#iss-app .iss-workspace-head h2{margin:0 0 5px;font-size:28px}\r\n#iss-app .iss-workspace-head p{margin:0;color:var(--iss-muted)}\r\n#iss-app .iss-upload{border:2px dashed var(--iss-border);border-radius:18px;background:var(--iss-card2);padding:34px 18px;text-align:center;transition:.2s;outline:none}\r\n#iss-app .iss-upload:hover,#iss-app .iss-upload.is-dragging,#iss-app .iss-upload:focus{border-color:var(--iss-primary);background:rgba(91,61,245,.06)}\r\n#iss-app .iss-upload-icon{font-size:42px;color:var(--iss-primary)}\r\n#iss-app .iss-upload h3{margin:6px 0}\r\n#iss-app .iss-upload p{margin:0 0 14px;color:var(--iss-muted)}\r\n#iss-app .iss-upload small{display:block;margin-top:13px;color:var(--iss-muted)}\r\n#iss-app .iss-btn{border:0;border-radius:11px;padding:11px 16px;font-weight:800;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:.2s}\r\n#iss-app .iss-btn-primary{background:linear-gradient(135deg,var(--iss-primary),var(--iss-primary2));color:#fff}\r\n#iss-app .iss-btn-success{background:var(--iss-success);color:#fff}\r\n#iss-app .iss-btn-light{background:var(--iss-card2);color:var(--iss-text);border:1px solid var(--iss-border)}\r\n#iss-app .iss-btn-large{padding:14px 22px;min-width:190px}\r\n#iss-app .iss-btn:disabled{opacity:.45;cursor:not-allowed}\r\n#iss-app .iss-file-info{margin-top:15px;padding:12px 14px;border:1px solid var(--iss-border);border-radius:12px;background:var(--iss-card2);font-size:13px}\r\n#iss-app .iss-editor-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);gap:20px;margin-top:20px}\r\n#iss-app .iss-preview-panel{min-width:0}\r\n#iss-app .iss-canvas-wrap{position:relative;min-height:320px;border:1px solid var(--iss-border);border-radius:16px;background:repeating-conic-gradient(#eef1f6 0 25%,#fff 0 50%) 50%\/22px 22px;display:grid;place-items:center;overflow:auto;padding:12px}\r\n#iss-app.iss-dark .iss-canvas-wrap{background:repeating-conic-gradient(#2b3242 0 25%,#202633 0 50%) 50%\/22px 22px}\r\n#iss-app #iss-canvas{max-width:100%;height:auto;display:block}\r\n#iss-app .iss-options{display:flex;flex-direction:column;gap:13px}\r\n#iss-app .iss-field{display:flex;flex-direction:column;gap:7px}\r\n#iss-app .iss-field label{font-size:13px;font-weight:750}\r\n#iss-app .iss-field input,#iss-app .iss-field select{width:100%;height:44px;border:1px solid var(--iss-border);border-radius:10px;background:var(--iss-card2);color:var(--iss-text);padding:0 11px}\r\n#iss-app .iss-field input[type=\"range\"]{padding:0}\r\n#iss-app .iss-field input[type=\"color\"]{padding:3px}\r\n#iss-app .iss-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}\r\n#iss-app .iss-action-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}\r\n#iss-app .iss-status{text-align:center;margin-top:12px;color:var(--iss-muted);font-size:13px}\r\n#iss-app .iss-alert{padding:12px 14px;border-radius:11px;margin-bottom:16px;background:rgba(200,59,77,.1);color:var(--iss-danger);border:1px solid rgba(200,59,77,.25)}\r\n#iss-app .iss-crop-box{position:absolute;border:2px dashed #ff4f6d;background:rgba(255,79,109,.12);pointer-events:none}\r\n#iss-app .iss-compare-wrap{border:1px solid var(--iss-border);border-radius:16px;padding:12px;background:var(--iss-card2)}\r\n#iss-app .iss-compare-stage{position:relative;overflow:hidden;min-height:300px;background:#ddd}\r\n#iss-app .iss-compare-stage img{display:block;width:100%;height:auto}\r\n#iss-app .iss-compare-after-wrap{position:absolute;inset:0;overflow:hidden;width:50%}\r\n#iss-app .iss-compare-after-wrap img{width:100%;height:auto;max-width:none}\r\n#iss-app .iss-compare-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}\r\n#iss-app #iss-compare-range{width:100%;margin-top:10px}\r\n#iss-app .iss-signature-wrap{border:1px solid var(--iss-border);border-radius:16px;padding:12px;background:#fff}\r\n#iss-app #iss-signature-canvas{width:100%;height:auto;touch-action:none;border:1px dashed #bbb}\r\n#iss-app .iss-signature-actions{text-align:center;margin-top:10px}\r\n#iss-app .iss-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:24px}\r\n#iss-app .iss-benefits article{padding:20px;border-radius:16px;border:1px solid var(--iss-border);background:var(--iss-card)}\r\n#iss-app .iss-benefits article span{font-size:25px}\r\n#iss-app .iss-benefits h3{margin:8px 0 4px}\r\n#iss-app .iss-benefits p{margin:0;color:var(--iss-muted)}\r\n#iss-app .iss-hidden{display:none!important}\r\n@media(max-width:800px){\r\n  #iss-app{border-radius:0}\r\n  #iss-app .iss-brand-sub{display:none}\r\n  #iss-app .iss-editor-grid{grid-template-columns:1fr}\r\n  #iss-app .iss-benefits{grid-template-columns:1fr}\r\n}\r\n@media(max-width:600px){\r\n  #iss-app .iss-tools{grid-template-columns:repeat(2,1fr)}\r\n  #iss-app .iss-tool{min-height:132px;padding:14px}\r\n  #iss-app .iss-hero{padding:42px 14px 70px}\r\n  #iss-app .iss-btn-large{width:100%}\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n  const app=document.getElementById('iss-app');\r\n  if(!app||app.dataset.init==='1')return;\r\n  app.dataset.init='1';\r\n\r\n  const els={\r\n    theme:document.getElementById('iss-theme'),search:document.getElementById('iss-search'),tools:document.getElementById('iss-tools'),\r\n    title:document.getElementById('iss-title'),desc:document.getElementById('iss-desc'),reset:document.getElementById('iss-reset'),\r\n    upload:document.getElementById('iss-upload'),file:document.getElementById('iss-file'),fileInfo:document.getElementById('iss-file-info'),\r\n    supported:document.getElementById('iss-supported'),canvas:document.getElementById('iss-canvas'),canvasWrap:document.getElementById('iss-canvas-wrap'),\r\n    cropBox:document.getElementById('iss-crop-box'),options:document.getElementById('iss-options'),process:document.getElementById('iss-process'),\r\n    download:document.getElementById('iss-download'),status:document.getElementById('iss-status'),alert:document.getElementById('iss-alert'),\r\n    compareWrap:document.getElementById('iss-compare-wrap'),compareBefore:document.getElementById('iss-compare-before'),\r\n    compareAfter:document.getElementById('iss-compare-after'),compareAfterWrap:document.getElementById('iss-compare-after-wrap'),\r\n    compareLine:document.getElementById('iss-compare-line'),compareRange:document.getElementById('iss-compare-range'),\r\n    signatureWrap:document.getElementById('iss-signature-wrap'),signatureCanvas:document.getElementById('iss-signature-canvas'),\r\n    clearSignature:document.getElementById('iss-clear-signature')\r\n  };\r\n  const ctx=els.canvas.getContext('2d');\r\n  const sigCtx=els.signatureCanvas.getContext('2d');\r\n  const state={tool:'resize',file:null,img:null,originalUrl:null,resultBlob:null,resultName:'processed-image.png',crop:null,secondFile:null,secondUrl:null};\r\n\r\n  const toolConfig={\r\n    resize:{title:'Resize Image',desc:'Resize an image while preserving its aspect ratio.',button:'Resize Image'},\r\n    compress:{title:'Compress Image',desc:'Reduce image size by adjusting quality.',button:'Compress Image'},\r\n    convert:{title:'Convert Image Format',desc:'Convert images between JPG, PNG and WEBP.',button:'Convert Image'},\r\n    crop:{title:'Crop Image',desc:'Drag over the image to select the required crop area.',button:'Crop Image'},\r\n    watermark:{title:'Add Watermark',desc:'Add a customizable text watermark to an image.',button:'Add Watermark'},\r\n    annotate:{title:'Add Text to Image',desc:'Place professional text annotations on screenshots.',button:'Add Text'},\r\n    blur:{title:'Blur Sensitive Area',desc:'Drag over an area to blur confidential information.',button:'Apply Blur'},\r\n    effects:{title:'Image Effects',desc:'Adjust brightness, contrast, grayscale and inversion.',button:'Apply Effects'},\r\n    rotate:{title:'Rotate and Flip',desc:'Rotate or mirror the selected image.',button:'Apply Rotation'},\r\n    signature:{title:'Signature Maker',desc:'Draw and download a transparent PNG signature.',button:'Create Signature'},\r\n    compare:{title:'Compare Two Images',desc:'Compare before and after images using an interactive slider.',button:'Load Comparison'},\r\n    passport:{title:'Passport Photo Maker',desc:'Create a printable sheet of ID-size photographs.',button:'Create Photo Sheet'}\r\n  };\r\n\r\n  function humanSize(n){const u=['B','KB','MB'];let i=0;while(n>=1024&&i<u.length-1){n\/=1024;i++}return n.toFixed(i?2:0)+' '+u[i]}\r\n  function showAlert(m){els.alert.textContent=m;els.alert.hidden=false}\r\n  function clearAlert(){els.alert.hidden=true;els.alert.textContent=''}\r\n  function setStatus(m){els.status.textContent=m||''}\r\n  function field(id,label,type,value,attrs=''){return `<div class=\"iss-field\"><label for=\"${id}\">${label}<\/label><input id=\"${id}\" type=\"${type}\" value=\"${value}\" ${attrs}><\/div>`}\r\n  function select(id,label,opts){return `<div class=\"iss-field\"><label for=\"${id}\">${label}<\/label><select id=\"${id}\">${opts}<\/select><\/div>`}\r\n  function checkbox(id,label,checked='checked'){return `<label class=\"iss-check\"><input id=\"${id}\" type=\"checkbox\" ${checked}> ${label}<\/label>`}\r\n\r\n  function reset(){\r\n    clearAlert();setStatus('');state.file=null;state.img=null;state.resultBlob=null;state.crop=null;state.secondFile=null;\r\n    if(state.originalUrl)URL.revokeObjectURL(state.originalUrl);\r\n    if(state.secondUrl)URL.revokeObjectURL(state.secondUrl);\r\n    state.originalUrl=state.secondUrl=null;\r\n    els.file.value='';els.fileInfo.hidden=true;els.fileInfo.innerHTML='';els.process.disabled=true;els.download.disabled=true;\r\n    els.canvas.width=1;els.canvas.height=1;els.cropBox.hidden=true;els.compareWrap.hidden=true;els.signatureWrap.hidden=true;els.canvasWrap.hidden=false;\r\n    configure();\r\n  }\r\n\r\n  function configure(){\r\n    const c=toolConfig[state.tool];els.title.textContent=c.title;els.desc.textContent=c.desc;els.process.textContent=c.button;\r\n    els.file.multiple=state.tool==='compare';els.upload.hidden=state.tool==='signature';\r\n    els.canvasWrap.hidden=state.tool==='compare'||state.tool==='signature';\r\n    els.compareWrap.hidden=state.tool!=='compare';els.signatureWrap.hidden=state.tool!=='signature';\r\n    if(state.tool==='signature'){els.process.disabled=false;setupSignature()}\r\n    renderOptions();\r\n  }\r\n\r\n  function renderOptions(){\r\n    switch(state.tool){\r\n      case'resize':\r\n        els.options.innerHTML=field('iss-width','Width (px)','number','1200','min=\"1\"')+field('iss-height','Height (px)','number','800','min=\"1\"')+checkbox('iss-lock','Keep aspect ratio');\r\n        break;\r\n      case'compress':\r\n        els.options.innerHTML=select('iss-format','Output format','<option value=\"image\/jpeg\">JPG<\/option><option value=\"image\/webp\">WEBP<\/option><option value=\"image\/png\">PNG<\/option>')+field('iss-quality','Quality','range','.75','min=\".1\" max=\"1\" step=\".05\"');\r\n        break;\r\n      case'convert':\r\n        els.options.innerHTML=select('iss-format','Output format','<option value=\"image\/jpeg\">JPG<\/option><option value=\"image\/png\">PNG<\/option><option value=\"image\/webp\">WEBP<\/option>')+field('iss-quality','Quality','range','.9','min=\".1\" max=\"1\" step=\".05\"');\r\n        break;\r\n      case'crop':\r\n        els.options.innerHTML='<p style=\"margin:0;color:var(--iss-muted);font-size:13px\">Drag across the image preview to select the crop area.<\/p>'+field('iss-crop-x','X','number','0')+field('iss-crop-y','Y','number','0')+field('iss-crop-w','Width','number','0')+field('iss-crop-h','Height','number','0');\r\n        break;\r\n      case'watermark':\r\n        els.options.innerHTML=field('iss-text','Watermark text','text','CONFIDENTIAL')+field('iss-font-size','Font size','number','48','min=\"8\"')+field('iss-color','Text color','color','#ffffff')+field('iss-opacity','Opacity','range','.35','min=\".05\" max=\"1\" step=\".05\"')+select('iss-position','Position','<option value=\"center\">Center<\/option><option value=\"top-left\">Top left<\/option><option value=\"top-right\">Top right<\/option><option value=\"bottom-left\">Bottom left<\/option><option value=\"bottom-right\">Bottom right<\/option>')+field('iss-rotation','Rotation','number','-30');\r\n        break;\r\n      case'annotate':\r\n        els.options.innerHTML=field('iss-text','Text','text','Add your note here')+field('iss-font-size','Font size','number','42','min=\"8\"')+field('iss-color','Text color','color','#ff0000')+field('iss-x','X position','number','50')+field('iss-y','Y position','number','80')+checkbox('iss-bg','Add white background','');\r\n        break;\r\n      case'blur':\r\n        els.options.innerHTML='<p style=\"margin:0;color:var(--iss-muted);font-size:13px\">Drag across the image preview to select the blur area.<\/p>'+field('iss-crop-x','X','number','0')+field('iss-crop-y','Y','number','0')+field('iss-crop-w','Width','number','0')+field('iss-crop-h','Height','number','0')+field('iss-blur','Blur strength','range','16','min=\"2\" max=\"40\"');\r\n        break;\r\n      case'effects':\r\n        els.options.innerHTML=field('iss-brightness','Brightness','range','100','min=\"20\" max=\"200\"')+field('iss-contrast','Contrast','range','100','min=\"20\" max=\"200\"')+field('iss-saturation','Saturation','range','100','min=\"0\" max=\"200\"')+checkbox('iss-grayscale','Grayscale','')+checkbox('iss-invert','Invert colors','');\r\n        break;\r\n      case'rotate':\r\n        els.options.innerHTML=select('iss-angle','Rotation','<option value=\"90\">90\u00b0 clockwise<\/option><option value=\"180\">180\u00b0<\/option><option value=\"270\">90\u00b0 anticlockwise<\/option>')+checkbox('iss-flip-h','Flip horizontally','')+checkbox('iss-flip-v','Flip vertically','');\r\n        break;\r\n      case'signature':\r\n        els.options.innerHTML=field('iss-sig-color','Pen color','color','#111111')+field('iss-sig-width','Pen width','range','4','min=\"1\" max=\"15\"');\r\n        break;\r\n      case'compare':\r\n        els.options.innerHTML='<p style=\"margin:0;color:var(--iss-muted);font-size:13px\">Select exactly two images. The slider will reveal differences between them.<\/p>';\r\n        break;\r\n      case'passport':\r\n        els.options.innerHTML=select('iss-photo-size','Photo size','<option value=\"35x45\">35 \u00d7 45 mm<\/option><option value=\"51x51\">2 \u00d7 2 inch<\/option><option value=\"33x48\">33 \u00d7 48 mm<\/option>')+select('iss-paper','Paper size','<option value=\"A4\">A4<\/option><option value=\"4x6\">4 \u00d7 6 inch<\/option>')+field('iss-gap','Gap (px)','number','20','min=\"0\"');\r\n        break;\r\n    }\r\n  }\r\n\r\n  async function loadFiles(files){\r\n    clearAlert();\r\n    try{\r\n      const list=[...files];if(!list.length)return;\r\n      list.forEach(f=>{if(!['image\/jpeg','image\/png','image\/webp'].includes(f.type))throw new Error('Only JPG, PNG and WEBP are supported.');if(f.size>25*1024*1024)throw new Error('File exceeds 25 MB limit.')});\r\n      if(state.tool==='compare'){\r\n        if(list.length!==2)throw new Error('Please choose exactly two images.');\r\n        state.file=list[0];state.secondFile=list[1];\r\n        state.originalUrl=URL.createObjectURL(list[0]);state.secondUrl=URL.createObjectURL(list[1]);\r\n        els.compareBefore.src=state.originalUrl;els.compareAfter.src=state.secondUrl;\r\n        els.fileInfo.hidden=false;els.fileInfo.textContent=`Before: ${list[0].name} \u2022 After: ${list[1].name}`;\r\n        els.process.disabled=false;return;\r\n      }\r\n      state.file=list[0];state.originalUrl=URL.createObjectURL(state.file);\r\n      const img=new Image();await new Promise((res,rej)=>{img.onload=res;img.onerror=rej;img.src=state.originalUrl});\r\n      state.img=img;drawOriginal();\r\n      els.fileInfo.hidden=false;els.fileInfo.textContent=`${state.file.name} \u2022 ${humanSize(state.file.size)} \u2022 ${img.naturalWidth} \u00d7 ${img.naturalHeight}px`;\r\n      els.process.disabled=false;\r\n      if(state.tool==='resize'){\r\n        document.getElementById('iss-width').value=img.naturalWidth;document.getElementById('iss-height').value=img.naturalHeight;\r\n        const w=document.getElementById('iss-width'),h=document.getElementById('iss-height');\r\n        w.oninput=()=>{if(document.getElementById('iss-lock').checked)h.value=Math.round(Number(w.value)*img.naturalHeight\/img.naturalWidth)};\r\n        h.oninput=()=>{if(document.getElementById('iss-lock').checked)w.value=Math.round(Number(h.value)*img.naturalWidth\/img.naturalHeight)};\r\n      }\r\n      if(['crop','blur'].includes(state.tool))enableSelection();\r\n    }catch(e){showAlert(e.message||'Unable to load image.')}\r\n  }\r\n\r\n  function drawOriginal(){\r\n    els.canvas.width=state.img.naturalWidth;els.canvas.height=state.img.naturalHeight;ctx.clearRect(0,0,els.canvas.width,els.canvas.height);ctx.drawImage(state.img,0,0)\r\n  }\r\n\r\n  function enableSelection(){\r\n    let start=null;\r\n    els.canvas.onpointerdown=e=>{const r=els.canvas.getBoundingClientRect(),sx=els.canvas.width\/r.width,sy=els.canvas.height\/r.height;start={x:(e.clientX-r.left)*sx,y:(e.clientY-r.top)*sy};els.canvas.setPointerCapture(e.pointerId)};\r\n    els.canvas.onpointermove=e=>{if(!start)return;const r=els.canvas.getBoundingClientRect(),sx=els.canvas.width\/r.width,sy=els.canvas.height\/r.height;const end={x:(e.clientX-r.left)*sx,y:(e.clientY-r.top)*sy};const x=Math.min(start.x,end.x),y=Math.min(start.y,end.y),w=Math.abs(end.x-start.x),h=Math.abs(end.y-start.y);state.crop={x,y,w,h};updateCropBox(r,x,y,w,h);['x','y','w','h'].forEach(k=>{const el=document.getElementById('iss-crop-'+k);if(el)el.value=Math.round(state.crop[k])})};\r\n    els.canvas.onpointerup=()=>{start=null};\r\n  }\r\n  function updateCropBox(r,x,y,w,h){els.cropBox.hidden=false;els.cropBox.style.left=(els.canvas.offsetLeft+x\/els.canvas.width*els.canvas.clientWidth)+'px';els.cropBox.style.top=(els.canvas.offsetTop+y\/els.canvas.height*els.canvas.clientHeight)+'px';els.cropBox.style.width=(w\/els.canvas.width*els.canvas.clientWidth)+'px';els.cropBox.style.height=(h\/els.canvas.height*els.canvas.clientHeight)+'px'}\r\n\r\n  function canvasBlob(type='image\/png',quality=.92){return new Promise(res=>els.canvas.toBlob(res,type,quality))}\r\n  function ext(type){return type==='image\/jpeg'?'jpg':type==='image\/webp'?'webp':'png'}\r\n\r\n  async function process(){\r\n    clearAlert();setStatus('Processing\u2026');\r\n    try{\r\n      if(state.tool==='signature'){state.resultBlob=await new Promise(r=>els.signatureCanvas.toBlob(r,'image\/png'));state.resultName='signature.png'}\r\n      else if(state.tool==='compare'){els.compareWrap.hidden=false;state.resultBlob=null;els.download.disabled=true;setStatus('Move the slider to compare both images.');return}\r\n      else{\r\n        if(!state.img)throw new Error('Please upload an image first.');\r\n        drawOriginal();\r\n        let type='image\/png',quality=.92;\r\n        if(state.tool==='resize'){\r\n          const w=Number(document.getElementById('iss-width').value),h=Number(document.getElementById('iss-height').value);if(!w||!h)throw new Error('Enter valid dimensions.');\r\n          const temp=document.createElement('canvas');temp.width=w;temp.height=h;temp.getContext('2d').drawImage(state.img,0,0,w,h);els.canvas.width=w;els.canvas.height=h;ctx.drawImage(temp,0,0)\r\n        }\r\n        if(state.tool==='compress'||state.tool==='convert'){type=document.getElementById('iss-format').value;quality=Number(document.getElementById('iss-quality').value)}\r\n        if(state.tool==='crop'){\r\n          const x=Number(document.getElementById('iss-crop-x').value),y=Number(document.getElementById('iss-crop-y').value),w=Number(document.getElementById('iss-crop-w').value),h=Number(document.getElementById('iss-crop-h').value);if(w<=0||h<=0)throw new Error('Select a crop area.');\r\n          const temp=document.createElement('canvas');temp.width=w;temp.height=h;temp.getContext('2d').drawImage(state.img,x,y,w,h,0,0,w,h);els.canvas.width=w;els.canvas.height=h;ctx.drawImage(temp,0,0);els.cropBox.hidden=true\r\n        }\r\n        if(state.tool==='blur'){\r\n          const x=Number(document.getElementById('iss-crop-x').value),y=Number(document.getElementById('iss-crop-y').value),w=Number(document.getElementById('iss-crop-w').value),h=Number(document.getElementById('iss-crop-h').value);if(w<=0||h<=0)throw new Error('Select an area to blur.');\r\n          ctx.save();ctx.filter=`blur(${Number(document.getElementById('iss-blur').value)}px)`;ctx.drawImage(state.img,x,y,w,h,x,y,w,h);ctx.restore();els.cropBox.hidden=true\r\n        }\r\n        if(state.tool==='watermark'){\r\n          const text=document.getElementById('iss-text').value,size=Number(document.getElementById('iss-font-size').value),color=document.getElementById('iss-color').value,opacity=Number(document.getElementById('iss-opacity').value),pos=document.getElementById('iss-position').value,rot=Number(document.getElementById('iss-rotation').value)*Math.PI\/180;\r\n          ctx.save();ctx.globalAlpha=opacity;ctx.font=`700 ${size}px Arial`;ctx.fillStyle=color;ctx.textAlign='center';ctx.textBaseline='middle';\r\n          let x=els.canvas.width\/2,y=els.canvas.height\/2,m=40;if(pos.includes('left'))x=m+ctx.measureText(text).width\/2;if(pos.includes('right'))x=els.canvas.width-m-ctx.measureText(text).width\/2;if(pos.includes('top'))y=m+size\/2;if(pos.includes('bottom'))y=els.canvas.height-m-size\/2;\r\n          ctx.translate(x,y);ctx.rotate(rot);ctx.fillText(text,0,0);ctx.restore()\r\n        }\r\n        if(state.tool==='annotate'){\r\n          const text=document.getElementById('iss-text').value,size=Number(document.getElementById('iss-font-size').value),color=document.getElementById('iss-color').value,x=Number(document.getElementById('iss-x').value),y=Number(document.getElementById('iss-y').value);\r\n          ctx.font=`700 ${size}px Arial`;if(document.getElementById('iss-bg').checked){const w=ctx.measureText(text).width;ctx.fillStyle='rgba(255,255,255,.9)';ctx.fillRect(x-8,y-size,w+16,size+14)}ctx.fillStyle=color;ctx.fillText(text,x,y)\r\n        }\r\n        if(state.tool==='effects'){\r\n          const b=document.getElementById('iss-brightness').value,c=document.getElementById('iss-contrast').value,s=document.getElementById('iss-saturation').value,g=document.getElementById('iss-grayscale').checked?' grayscale(100%)':'',i=document.getElementById('iss-invert').checked?' invert(100%)':'';\r\n          ctx.clearRect(0,0,els.canvas.width,els.canvas.height);ctx.filter=`brightness(${b}%) contrast(${c}%) saturate(${s}%)${g}${i}`;ctx.drawImage(state.img,0,0);ctx.filter='none'\r\n        }\r\n        if(state.tool==='rotate'){\r\n          const a=Number(document.getElementById('iss-angle').value)*Math.PI\/180,fh=document.getElementById('iss-flip-h').checked?-1:1,fv=document.getElementById('iss-flip-v').checked?-1:1;\r\n          const swap=Math.abs(Math.sin(a))>.5,temp=document.createElement('canvas');temp.width=swap?state.img.naturalHeight:state.img.naturalWidth;temp.height=swap?state.img.naturalWidth:state.img.naturalHeight;const t=temp.getContext('2d');t.translate(temp.width\/2,temp.height\/2);t.rotate(a);t.scale(fh,fv);t.drawImage(state.img,-state.img.naturalWidth\/2,-state.img.naturalHeight\/2);els.canvas.width=temp.width;els.canvas.height=temp.height;ctx.drawImage(temp,0,0)\r\n        }\r\n        if(state.tool==='passport'){\r\n          const [pw,ph]=document.getElementById('iss-photo-size').value.split('x').map(Number),paper=document.getElementById('iss-paper').value,gap=Number(document.getElementById('iss-gap').value);const dpi=300,mm=dpi\/25.4,photoW=Math.round(pw*mm),photoH=Math.round(ph*mm);let sheetW,sheetH;if(paper==='A4'){sheetW=Math.round(210*mm);sheetH=Math.round(297*mm)}else{sheetW=1200;sheetH=1800}\r\n          const temp=document.createElement('canvas');temp.width=sheetW;temp.height=sheetH;const t=temp.getContext('2d');t.fillStyle='#fff';t.fillRect(0,0,sheetW,sheetH);const cols=Math.floor((sheetW-gap)\/(photoW+gap)),rows=Math.floor((sheetH-gap)\/(photoH+gap));const scale=Math.max(photoW\/state.img.naturalWidth,photoH\/state.img.naturalHeight),sw=photoW\/scale,sh=photoH\/scale,sx=(state.img.naturalWidth-sw)\/2,sy=(state.img.naturalHeight-sh)\/2;for(let r=0;r<rows;r++)for(let c=0;c<cols;c++){const x=gap+c*(photoW+gap),y=gap+r*(photoH+gap);t.drawImage(state.img,sx,sy,sw,sh,x,y,photoW,photoH);t.strokeStyle='#bbb';t.strokeRect(x,y,photoW,photoH)}els.canvas.width=sheetW;els.canvas.height=sheetH;ctx.drawImage(temp,0,0)\r\n        }\r\n        state.resultBlob=await canvasBlob(type,quality);state.resultName=`${state.tool}-result.${ext(type)}`\r\n      }\r\n      els.download.disabled=!state.resultBlob;setStatus(state.resultBlob?`Ready \u2022 ${humanSize(state.resultBlob.size)}`:'Completed');\r\n    }catch(e){showAlert(e.message||'Processing failed.')} \r\n  }\r\n\r\n  function download(){if(!state.resultBlob)return;const u=URL.createObjectURL(state.resultBlob),a=document.createElement('a');a.href=u;a.download=state.resultName;document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(u),1500)}\r\n\r\n  function setupSignature(){\r\n    sigCtx.clearRect(0,0,els.signatureCanvas.width,els.signatureCanvas.height);let drawing=false,last=null;\r\n    const pos=e=>{const r=els.signatureCanvas.getBoundingClientRect();return{x:(e.clientX-r.left)*els.signatureCanvas.width\/r.width,y:(e.clientY-r.top)*els.signatureCanvas.height\/r.height}};\r\n    els.signatureCanvas.onpointerdown=e=>{drawing=true;last=pos(e);els.signatureCanvas.setPointerCapture(e.pointerId)};\r\n    els.signatureCanvas.onpointermove=e=>{if(!drawing)return;const p=pos(e);sigCtx.strokeStyle=document.getElementById('iss-sig-color')?.value||'#111';sigCtx.lineWidth=Number(document.getElementById('iss-sig-width')?.value||4);sigCtx.lineCap='round';sigCtx.beginPath();sigCtx.moveTo(last.x,last.y);sigCtx.lineTo(p.x,p.y);sigCtx.stroke();last=p};\r\n    els.signatureCanvas.onpointerup=()=>drawing=false;els.clearSignature.onclick=()=>sigCtx.clearRect(0,0,els.signatureCanvas.width,els.signatureCanvas.height)\r\n  }\r\n\r\n  els.tools.addEventListener('click',e=>{const b=e.target.closest('.iss-tool');if(!b)return;state.tool=b.dataset.tool;els.tools.querySelectorAll('.iss-tool').forEach(x=>x.classList.toggle('is-active',x===b));reset();els.title.scrollIntoView({behavior:'smooth',block:'center'})});\r\n  els.search.addEventListener('input',()=>{const q=els.search.value.toLowerCase().trim();els.tools.querySelectorAll('.iss-tool').forEach(b=>b.classList.toggle('iss-hidden',q&&!(`${b.dataset.search} ${b.textContent}`.toLowerCase().includes(q))))});\r\n  els.upload.addEventListener('click',()=>els.file.click());els.upload.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();els.file.click()}});\r\n  els.file.addEventListener('change',()=>loadFiles(els.file.files));\r\n  ['dragenter','dragover'].forEach(t=>els.upload.addEventListener(t,e=>{e.preventDefault();els.upload.classList.add('is-dragging')}));\r\n  ['dragleave','drop'].forEach(t=>els.upload.addEventListener(t,e=>{e.preventDefault();els.upload.classList.remove('is-dragging')}));\r\n  els.upload.addEventListener('drop',e=>loadFiles(e.dataTransfer.files));\r\n  els.process.addEventListener('click',process);els.download.addEventListener('click',download);els.reset.addEventListener('click',reset);\r\n  els.compareRange.addEventListener('input',()=>{const v=els.compareRange.value+'%';els.compareAfterWrap.style.width=v;els.compareLine.style.left=v});\r\n  els.theme.addEventListener('click',()=>{app.classList.toggle('iss-dark');localStorage.setItem('iss-theme',app.classList.contains('iss-dark')?'dark':'light')});\r\n  if(localStorage.getItem('iss-theme')==='dark'||(!localStorage.getItem('iss-theme')&&matchMedia('(prefers-color-scheme:dark)').matches))app.classList.add('iss-dark');\r\n  configure();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>IS Image &#038; Screenshot Studio Edit, convert and optimize images securely in your browser \u25d0 100% Browser Based Professional Image Tools in One Place Resize, compress, convert, crop, watermark, annotate and compare images without uploading them to a server. \u2194Resize ImageChange width and height \u21e3Compress ImageReduce image file size \u21c4Convert FormatJPG, PNG and WEBP \u2317Crop [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-692","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":4,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/692\/revisions"}],"predecessor-version":[{"id":696,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/692\/revisions\/696"}],"wp:attachment":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/media?parent=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}