title: How to compress and resize image from a Rich Text
body: <p>I am inserting image in using this</p>
  
  <pre><code>var readFileIntoDataUrl = function (fileInfo) {
      var loader = $.Deferred(),
          fReader = new FileReader();
      fReader.onload = function (e) {
          loader.resolve(e.target.result);
      };
      fReader.onerror = loader.reject;
      fReader.onprogress = loader.notify;
      fReader.readAsDataURL(fileInfo);
      return loader.promise();
  };
  
  
  $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
          execCommand('insertimage', dataUrl);
  }).fail(function (e) {
          options.fileUploadError("file-reader", e);
  });
  </code></pre>
  
  <p>Let say i added a text <code>Hello World</code> and added a image. Now when i take <code>$("#editor").html()</code> it shows something like below</p>
  
  <p>Here is a sample source of a image+text</p>
  
  <pre><code>Hello World!
  img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgA
  BAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAARAAAATgAAAAAAAABgAAAA
  AQAAAGAAAAABUGFpbnQuTkVUIHYzLjUuOAAA/9sAQwAHBQUGBQQHBgUGCAcHCAoRCwoJCQoVDxAMERgV
  [... more base64 data here....]
  </code></pre>
  
  <p>Now here i have both <code>text+image</code> So both on server side and client side i want to resize &amp; compress image</p>
  
  <p>So that no one can insert image > 5MP and also keep a rich text with resize image in my db</p>