通过blob获取图像并显示

Posted 神奇的旋风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过blob获取图像并显示相关的知识,希望对你有一定的参考价值。

html代码:
<div id="forAppend" class="demo"></div>
JS代码:
var eleAppend = document.getElementById("forAppend");
window.URL = window.URL || window.webkitURL;
if (typeof history.pushState == "function") {
    var xhr = new XMLHttpRequest();    
    xhr.open("get", "/image/study/s/s256/mm1.jpg", 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>‘;    
}

from:http://www.zhangxinxu.com/study/201310/blob-get-image-show.html

以上是关于通过blob获取图像并显示的主要内容,如果未能解决你的问题,请参考以下文章

UiImage swift 3中的Mysql blob图像显示

如何将 blob 转换为图像并在 React 上显示?

如何在我的 Uppy 自定义设置中获取 Blob 图像预览

获取 Azure Blob(图像)并 POST 到外部 API

从json中的mysql获取Blob图像并转换为位图

PHP显示来自MySQL的图像BLOB [重复]