title: Croppie : How to get output image in JPEG instead of default PNG?
body: <p>I use croppie to upload images in my laravel application. The upload part works flawlessly. However, since the PNG image takes more space than the original images. I want to have jpeg images stored on the server instead of PNG and with my own quality parameters provided.</p>
  <p>Here is the javascript code I use for uploading images using croppie.
  but save image with PNG format</p>
  <pre><code>$(function() {
      var croppie = null;
      var el = document.getElementById('resizer');
  
      $.base64ImageToBlob = function(str) {
          // extract content type and base64 payload from original string
          var pos = str.indexOf(';base64,');
          var type = str.substring(5, pos);
          var b64 = str.substr(pos + 8);
        
          // decode base64
          var imageContent = atob(b64);
        
          // create an ArrayBuffer and a view (as unsigned 8-bit)
          var buffer = new ArrayBuffer(imageContent.length);
          var view = new Uint8Array(buffer);
        
          // fill the view, using the decoded base64
          for (var n = 0; n &lt; imageContent.length; n++) {
            view[n] = imageContent.charCodeAt(n);
          }
        
          // convert ArrayBuffer to Blob
          var blob = new Blob([buffer], { type: type });
        
          return blob;
      }
  
      $.getImage = function(input, croppie) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
              reader.onload = function(e) {  
                  croppie.bind({
                      url: e.target.result,
                  });
              }
              reader.readAsDataURL(input.files[0]);
          }
      }
  
      $(&quot;#file-upload&quot;).on(&quot;change&quot;, function(event) {
          $(&quot;#myModal&quot;).modal();
          // Initailize croppie instance and assign it to global variable
          croppie = new Croppie(el, {
                  viewport: {
                      width: 200,
                      height: 200,
                      type: 'circle'
                  },
                  boundary: {
                      width: 250,
                      height: 250
                  },
                  enableOrientation: true
              });
          $.getImage(event.target, croppie); 
      });
  
      $(&quot;#upload&quot;).on(&quot;click&quot;, function() {
          croppie.result('base64','original','jpeg',0).then(function(base64) {
              $(&quot;#myModal&quot;).modal(&quot;hide&quot;); 
              $(&quot;#profile-pic&quot;).attr(&quot;src&quot;,&quot;/images/ajax-loader.gif&quot;);
  
              var url = &quot;{{ url('/demos/jquery-image-upload') }}&quot;;
              var formData = new FormData();
              formData.append(&quot;profile_picture&quot;, $.base64ImageToBlob(base64));
  
              // This step is only needed if you are using Laravel
              $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').attr('content')
                  }
              });
  
              $.ajax({
                  type: 'POST',
                  url: url,
                  data: formData,
                  processData: false,
                  contentType: false,
                  success: function(data) {
                      if (data == &quot;uploaded&quot;) {
                          $(&quot;#profile-pic&quot;).attr(&quot;src&quot;, base64); 
                      } else {
                          $(&quot;#profile-pic&quot;).attr(&quot;src&quot;,&quot;/images/icon-cam.png&quot;); 
                          console.log(data['profile_picture']);
                      }
                  },
                  error: function(error) {
                      console.log(error);
                      $(&quot;#profile-pic&quot;).attr(&quot;src&quot;,&quot;/images/icon-cam.png&quot;); 
                  }
              });
          });
      });
  
      // To Rotate Image Left or Right
      $(&quot;.rotate&quot;).on(&quot;click&quot;, function() {
          croppie.rotate(parseInt($(this).data('deg'))); 
      });
  
      $('#myModal').on('hidden.bs.modal', function (e) {
          // This function will call immediately after model close
          // To ensure that old croppie instance is destroyed on every model close
          setTimeout(function() { croppie.destroy(); }, 100);
      })
  
  });
  </code></pre>