title: JavaScript reduce the size and quality of image with based64 encoded code
body: <p>I have the based64 encoded code of an image. Now I want to reduce the size and quality of the image. How can I do this in JavaScript or jQuery?</p>
  
  <p><strong>Resolve here is the working code  : Index.php</strong>
  Here is javascript code which worked form me </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;JavaScript Image Resize&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;style&gt;
  body {
      font-size: 16px;
      font-family: Arial;
  }
  
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  function _resize(img, maxWidth, maxHeight) 
  {
      var ratio = 1;
      var canvas = document.createElement("canvas");
      canvas.style.display="none";
      document.body.appendChild(canvas);
  
      var canvasCopy = document.createElement("canvas");
      canvasCopy.style.display="none";
      document.body.appendChild(canvasCopy);
  
      var ctx = canvas.getContext("2d");
      var copyContext = canvasCopy.getContext("2d");
  
          if(img.width &gt; maxWidth)
                  ratio = maxWidth / img.width;
          else if(img.height &gt; maxHeight)
                  ratio = maxHeight / img.height;
  
          canvasCopy.width = img.width;
          canvasCopy.height = img.height;
  try {
          copyContext.drawImage(img, 0, 0);
  } catch (e) { 
      document.getElementById('loader').style.display="none";
      alert("There was a problem - please reupload your image");
      return false;
  }
          canvas.width = img.width * ratio;
          canvas.height = img.height * ratio;
          // the line to change
          //ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
          // the method signature you are using is for slicing
          ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);
          var dataURL = canvas.toDataURL("image/png");
          document.body.removeChild(canvas);
          document.body.removeChild(canvasCopy);
  
          return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  
  
  };
  
  function resize() { 
      var photo = document.getElementById("photo");
  
      if(photo.files!=undefined){ 
          var loader = document.getElementById("loader");
          loader.style.display = "inline";
          var file  = photo.files[0];
          document.getElementById("orig").value = file.fileSize;
          var preview = document.getElementById("preview");
          var r = new FileReader();
          r.onload = (function(previewImage) { 
              return function(e) { 
                  var maxx = 500;
                  var maxy = 500;
                  previewImage.src = e.target.result; 
                  var k = _resize(previewImage, maxx, maxy);
                  if(k!=false) { 
                  document.getElementById('base64').value= k;
                  document.getElementById('upload').submit();
                  } else {
                  alert('problem - please attempt to upload again');
                  }
              }; 
          })(preview);
          r.readAsDataURL(file);
      } else {
          alert("Seems your browser doesn't support resizing");
      }
      return false;
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div align="center"&gt;
  &lt;h2&gt;Image Resize Demo&lt;/h2&gt;
  
      &lt;input type="file" name="photo" id="photo"&gt;
      &lt;br&gt; 
      &lt;br&gt;    
      &lt;input type="button" onClick="resize();" value="Resize"&gt;
      &lt;img src="loader.gif" id="loader" /&gt;
      &lt;img src="" alt="Image preview" id="preview"&gt;
     &lt;form name="upload" id="upload" method='post' action='show.php'&gt;
          &lt;textarea name="base64" id="base64" rows='10' cols='90'&gt;&lt;/textarea&gt;
          &lt;input type="hidden" id="orig" name="orig" value=""/&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Show.php file</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;JavaScript file upload&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;style&gt;
  body {
      font-size: 16px;
      font-family: Arial;
  }
  #preview {
      display:none;
  }
  #base64 {
      display:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  $base64size = strlen($_POST['base64']);
  $f = base64_decode($_POST['base64']);
  $name = microtime(true).".png";
  file_put_contents("./$name", $f);
  #header("Content-type: image/png");
  #header("Content-Disposition: attachment; filename=\"shrunk.png\"");
  #echo $f;
  #die();
  ?&gt;
  &lt;h2&gt;Shrunk file&lt;/h2&gt;
  &lt;p&gt;Original file was: &lt;?=$_POST['orig'];?&gt; bytes&lt;/p&gt;
  &lt;p&gt;Transmitted size was: &lt;?=$base64size;?&gt; bytes (due to base64)&lt;/p&gt;
  &lt;p&gt;New file is: &lt;?=filesize("./$name");?&gt; bytes&lt;/p&gt;
  &lt;p&gt;&lt;img src="&lt;?=$name;?&gt;"/&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>