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. 统计TCP网络连接情况

    #!/bin/bash metric=$1 tmp_file=/tmp/tcp_status.txt /bin/netstat -an|awk '/^tcp/{++S[$NF]}END{for(a i ...

  2. git github usage

    以gerrit-trigger-plugin为例,下面的链接都是从相应页面上直接拷贝的. 法一:不用github的账号,打开这个库在github上的主页,运行下面命令即可 read only 运行命令 ...

  3. python系列三:python3运算符

    '''python 没有自增运算符python 中,变量是以内容为基准而不是像 c 中以变量名为基准,所以只要你的数字内容是5,不管你起什么名字,这个变量的 ID 是相同的,同时也就说明了 pytho ...

  4. JavaScript数据结构与算法-数组练习

    一. 创建一个记录学生成绩的对象,提供一个添加成绩的方法,以及一个显示学生平均成绩的方法. // 创建一个记录学生成绩的对象 const Students = function Students () ...

  5. CSS:text-decoration参数说明

    CSS:text-decoration(下划线参数) underline:下划线 效果:下划线 overline:上划线 效果:上划线 line-through:贯穿线 效果:贯穿线 blink:闪烁 ...

  6. HTML代码的美感

    每当我访问精美的网站,我都情不自禁地会去查看源代码.这就好比你拥有一副X光眼镜,能够看到任何人--甚至透视他们的遮羞布.这简直是天经地义的事情嘛!我迫不及待地想了解,这个精美的网站,是不是由同样具有美 ...

  7. Android系统移植与调试之------->如何修改开机动画的两种方式剖析

    首先,我们先来分析一下源码: frameworks/base/cmds/bootanimation/BootAnimation.cpp 首先看一下定义的常量: BootAnimation::ready ...

  8. nginx反向代理三台web

    1.首先我们需要在服务器中三个不同名字,并将他们赋值 2.切换到nginx—conf  把三台机器的nginx的配置文件分别命名为web1.conf.web2.conf.web3.conf vim的赋 ...

  9. VC:res协议——从模块中获取资源

    你可以从模块中获取一个资源.通过在文件名之前加上res://,你就可以引用一个嵌入在动态链接库资源文件中的HTML页面.

  10. 013_HDFS文件合并上传putmarge功能(类似于hadoop fs -getmerge)

    场景 合并小文件,存放到HDFS上.例如,当需要分析来自许多服务器的Apache日志时,各个日志文件可能比较小,然而Hadoop更合适处理大文件,效率会更高,此时就需要合并分散的文件.如果先将所有文件 ...