將圖片地址轉爲blob格式的例子

HTML代碼:html

<div id="forAppend" class="demo"></div>

Javascript代碼:web

<script>
var eleAppend = document.getElementById("forAppend");
window.URL = window.URL || window.webkitURL;
if (typeof history.pushState == "function") {
    var xhr = new XMLHttpRequest();    
    xhr.open("get", "此處填寫您的圖片地址", true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = this.response;
            var img = document.createElement("img");
            img.onload = function(e) {
              window.URL.revokeObjectURL(img.src); // 清除釋放
            };
            img.src = window.URL.createObjectURL(blob);
            eleAppend.appendChild(img);    
        }
    }
    xhr.send();
} else {
    eleAppend.innerHTML = '<p style="color:#cd0000;">請更換瀏覽器重試~</p>';    
}
</script>

請務必在環境下運行瀏覽器

(來源:http://www.zhangxinxu.com/study/201310/blob-get-image-show.html   相似知識:http://blog.csdn.net/oscar999/article/details/36373183)app

相關文章
相關標籤/搜索