nolanlawson/baby-bunny.jpg

## baby-bunny.jpg

      
    Raw
  

              baby-bunny.jpg
            
          
## index.html
<html>
  <body>
    <h1>Check XHR blob support</h1>
    <p>If you see two images below, then blobs are supported.</p>
    <img id="bunny" src="baby-bunny.jpg"/>
    <script src="index.js"></script>
  </body>
</html>

## index.js
(function () {
  'use strict'

  document.addEventListener('DOMContentLoaded', function() {

    var input = document.getElementById('bunny');

    var src = input.src;

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        var blob = xhr.response;
        var h1 = document.createElement('h1');
        h1.innerHTML = 'Downloaded via XHR as blob:';
        document.body.appendChild(h1);

        var output = document.createElement('img');
        var URL = window.URL || window.webkitURL;
        output.src = URL.createObjectURL(blob);
        document.body.appendChild(output);
      }
    };
    xhr.open('GET', src, true);
    xhr.responseType = 'blob';
    xhr.send();
  });
})();
	<html>
	<body>
	<h1>Check XHR blob support</h1>
	<p>If you see two images below, then blobs are supported.</p>
	<img id="bunny" src="baby-bunny.jpg"/>
	<script src="index.js"></script>
	</body>
	</html>
	(function () {
	'use strict'

	document.addEventListener('DOMContentLoaded', function() {

	var input = document.getElementById('bunny');

	var src = input.src;

	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
	if (xhr.readyState === 4) {
	var blob = xhr.response;
	var h1 = document.createElement('h1');
	h1.innerHTML = 'Downloaded via XHR as blob:';
	document.body.appendChild(h1);

	var output = document.createElement('img');
	var URL = window.URL \|\| window.webkitURL;
	output.src = URL.createObjectURL(blob);
	document.body.appendChild(output);
	}
	};
	xhr.open('GET', src, true);
	xhr.responseType = 'blob';
	xhr.send();
	});
	})();