title: which function should I use? .toDataURL() or .toBlob()?
body: <p>I want to resize image at client side using JavaScript. I found 2 solutions, one is using <code>.toDataURL()</code> function and the other is using <code>.toBlob()</code> function. Both solutions are worked. Well, I just curious what is the difference between those two functions? which one is better? or when should I use <code>.toDataURL()</code> function or <code>.toBlob()</code> function?</p>
  
  <p>Here is the code I used to output those two function, and I got very slightly different in image size (bytes) and image color (I'm not sure about this one). Is something wrong with the code?</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Php code compress the image&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input id="file" type="file" onchange="fileInfo();"&gt;&lt;br&gt;
          &lt;div&gt;
              &lt;h3&gt;Original Image&lt;/h3&gt;
              &lt;img id="source_image"/&gt;
              &lt;button onclick="resizeImage()"&gt;Resize Image&lt;/button&gt;
              &lt;button onclick="compressImage()"&gt;Compress Image&lt;/button&gt;
              &lt;h1 id="source_image_size"&gt;&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h3&gt;Resized Image&lt;/h3&gt;
              &lt;h1&gt; image from dataURL function &lt;/h1&gt;
              &lt;img id="result_resize_image_dataURL"/&gt;
  
              &lt;h1&gt; image from toBlob function &lt;/h1&gt;
              &lt;img id="result_resize_image_toBlob"/&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Console output&lt;/legend&gt;
                  &lt;div id='console_out'&gt;&lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              //Console logging (html)
              if (!window.console)
              console = {};
  
              var console_out = document.getElementById('console_out');
              var output_format = "jpg";
  
              console.log = function(message) {
                  console_out.innerHTML += message + '&lt;br /&gt;';
                  console_out.scrollTop = console_out.scrollHeight;
              }
  
              var encodeButton = document.getElementById('jpeg_encode_button');
              var encodeQuality = document.getElementById('jpeg_encode_quality');
  
              function fileInfo(){
                  var preview = document.getElementById('source_image');
                  var file   = document.querySelector('input[type=file]').files[0];
                  var reader  = new FileReader();
                  reader.addEventListener("load", function(e) {
                      preview.src = e.target.result;
                  }, false);
                  if (file) {
                      reader.readAsDataURL(file);
                  }
              }
              function resizeImage() {
                  var loadedData = document.getElementById('source_image');
                  var result_image = document.getElementById('result_resize_image_dataURL');
  
                  var cvs = document.createElement('canvas'),ctx;
                  cvs.width = Math.round(loadedData.width/4);
                  cvs.height = Math.round(loadedData.height/4);
                  var ctx = cvs.getContext("2d").drawImage(loadedData, 0, 0, cvs.width, cvs.height);
                  cvs.toBlob(function(blob) {
                      var newImg = document.getElementById('result_resize_image_toBlob'),
                          url = URL.createObjectURL(blob);
                      newImg.onload = function() {
                          // no longer need to read the blob so it's revoked
                          URL.revokeObjectURL(url);
                      };
  
                      newImg.src = url;
                      console.log(blob.size/1024);
                  }, 'image/jpeg', 0.92);
  
                  var newImageData = cvs.toDataURL('image/jpeg', 0.92);
                  var result_image_obj = new Image();
                  result_image_obj.src = newImageData;
                  result_image.src = result_image_obj.src;
                  var head = 'data:image/png;base64,';
                  var imgFileSize = ((newImageData.length - head.length)*3/4)/1024;
                  console.log(imgFileSize);
              }
  </code></pre>
  
  <p><strong>Edited:</strong></p>
  
  <p>Based on <a href="https://stackoverflow.com/questions/11896740/result-of-html5-canvas-getimagedata-or-todataurl-which-takes-up-more-memory">Result of html5 Canvas getImageData or toDataURL - Which takes up more memory?</a>, its said that </p>
  
  <blockquote>
    <p>"DataURL (BASE64) is imageData compressed to JPG or PNG, then converted to string, and this string is larger by 37% (info) than BLOB." </p>
  </blockquote>
  
  <p>What is the string mean? is it same as size in bytes? using the code I provided above, the size difference is less than 1Kb (less than 1%). is <code>.toBlob()</code> always better than <code>.toDataURL()</code> function? or there is a specific condition where it would be better to use <code>.toDataURL()</code> function?</p>