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 >浏览器不给力,还是早点回去给孩子喂奶吧~</p>';
}

使用Blob获取图片并二进制显示实例页面的更多相关文章

  1. Android ListView从网络获取图片及文字显示

    上一篇文章说的是ListView展示本地的图片以及文本,这一篇说一下如何从网络获取图片以及文本来显示.事实上,一般是先获取Josn或sml数据,然后解释显示.我们先从网上获取xml,然后对其进行解析, ...

  2. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  3. BLOB存储图片文件二进制数据是非对错

    子在一天一天虚度,生活也在一天一天中茫然 做人做事哪能尽如人意,付出多少收获多少虽然存在偏颇,但是不劳而获的心态是万万不对的,更不能去怨天尤人,低调为人.做好自己就可以了 改进你的系统的最好的方法是先 ...

  4. 关于Python获取图片文件二进制数据的问题(获取为空)

    在搭建fastdfs文件系统的时候遇到了点问题,在测试上传文件数据流的时候,需要Python来获取本地文件的二进制流 from fdfs_client.client import Fdfs_clien ...

  5. Servlet从本地文件中读取图片,并显示在页面中

    import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...

  6. -webkit-line-clamp下多行文字溢出点点点...显示实例页面

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box ...

  7. Android相机、相册获取图片显示并保存到SD卡

    Android相机.相册获取图片显示并保存到SD卡 [复制链接]   电梯直达 楼主    发表于 2013-3-13 19:51:43 | 只看该作者 |只看大图  本帖最后由 happy小妖同学 ...

  8. .NET 使用 Azure Blob 存储图片或文件

    使用的是VS2017 一.先使用 NuGet 获取这两个包. 执行以下步骤: 在“解决方案资源管理器”中,右键单击你的项目并选择“管理 NuGet 包”. 1.在线搜索“WindowsAzure.St ...

  9. Mono for Android (4)-- 图片转为二进制,二进制转回图片

    最近纠结蓝牙打印的问题,想着图片先转为二进制发给打印机,找了好多资料,终于成功了,贴出来共享一下 先是图片转换为二进制的: Bitmap bitmap = BitmapFactory.DecodeRe ...

随机推荐

  1. coursera 《现代操作系统》 -- 第五周 同步机制(1)

    临界区块(Critical section)指的是一个访问共用资源(例如:共用设备或是共用存储器)的程序片段,而这些共用资源有无法同时被多个线程访问的特性.(不是字面意思的一个区域,是程序片段的集合) ...

  2. 剖析与优化 Go 的 web 应用

    https://mp.weixin.qq.com/s/HDsbZLOK3h8-XjejvPH2sA https://studygolang.com/articles/12685

  3. jenkins配置SVN报错

    jenkins配置SVN报错,如图:

  4. python函数回顾:hex()

    描述 hex() 函数用于将10进制整数转换成16进制,以字符串形式表示. 语法 hex 语法: hex(x) 参数说明: x -- 10进制整数 返回值 返回16进制数,以字符串形式表示. 实例 & ...

  5. python多线程(三)

    同步锁 两个需要注意的点: 线程抢的是GIL锁,GIL锁相当于执行权限,拿到执行权限后才能拿到互斥锁Lock,其他线程也可以抢到GIL,但如果发现Lock仍然没有被释放则阻塞,即便是拿到执行权限GIL ...

  6. ThreadLocal (三):为何TransmittableThreadLocal

    一.示例 线程池内的线程并没有父子关系,所以不适合InheritableThreadLocal的使用场景 public class ThreadPoolInheritableThreadLocalDe ...

  7. Facebook支持python的开源预测工具Prophet

    Facebook 宣布开源一款基于 Python 和 R 语言的数据预测工具――“Prophet”,即“先知”.取名倒是非常直白. Facebook 表示,Prophet 相比现有预测工具更加人性化, ...

  8. SE80 开发对象

    偶然发现:开发对象可以自动识别对象的类别.

  9. vue_router打包(webpack)

    把组件按组分块 有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中.只需要 给 chunk 命名,提供 require.ensure第三个参数作为 chunk 的名称: require ...

  10. Python学习笔记2_Python基础

    一.变量(给数据起个名字) 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变. 1.变量的命名方法 -变量名有字母.数字.下划线组成 -不能以数字开头 -不可以使用关键字 -a ...