title: converting a DIV to base64
body: <p>How do I convert items inside a DIV to base64? See <a href="https://jsfiddle.net/YvQ5y/973/" rel="nofollow">examle FIddle</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="img2b64"&gt; &lt;img src="http://indianapublicmedia.org/stateimpact/files/2013/01/apple-image-300x300.jpg"&gt; &lt;div&gt;&lt;br /&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#ss').click(function(event){
      var imageUrl = $('#img2b64').find('input[name=url]').val();
      console.log('imageUrl', imageUrl);
      convertImgToBase64(imageUrl, function(base64Img){
          $('.output')
              .find('textarea')
                  .val(base64Img)
                  .end()
              .find('a')
                  .attr('href', base64Img)
                  .text(base64Img)
                  .end()
              .find('img')
                  .attr('src', base64Img);
      });
  
      event.preventDefault();
  });
  
  
  function convertImgToBase64(url, callback, outputFormat){
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d');
      var img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img,0,0);
          var dataURL = canvas.toDataURL(outputFormat || 'image/png');
          callback.call(this, dataURL);
          // Clean up
          canvas = null; 
      };
      img.src = url;
  }
  </code></pre>