<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 Blob URL.createObjectURL 显示（同源）图片</title>
</head>
<body >
<button id="getPic" >12313</button>
<progress id="pg" value="" max="100"></progress>
<script>
document.getElementById('getPic').onclick = function(e){
var xhr = new XMLHttpRequest();
xhr.open("get", 'https://www.runoob.com/images/logo-domain-white.png');
xhr.responseType = "blob";
xhr.onload = function() {
var img = document.createElement('img');
img.style.cssText = 'border:1px solid red;'
objectUrl = window.URL.createObjectURL(xhr.response)
img.src = objectUrl;
img.onload = function(){
window.URL.revokeObjectURL(img.src);
};
document.body.appendChild(img);
};
xhr.onprogress = function (event) {
pg = document.getElementById('pg');
pg.attributes.max = event.total;
pg.value = event.loaded;
};
xhr.send();
e.preventDefault();
}
</script>
</body>
</html>
