【转】通过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

时间: 2024-10-16 10:02:03

【转】通过blob获取图像并显示的相关文章

JSP读取Oracle数据库里的图片Blob字段并显示在页面上&lt;转&gt;

java代码:首先定义一个读取Oracle数据库的Blob字段并把字节写入一个输出流的方法. 1 public static void writeImg(OutputStream os) { 2 Connection con; 3 try { 4 con = ConnectionFactory.getConnection(); 5 Statement stmt = con.createStatement(); 6 ResultSet rs = stmt.executeQuery("select

jsp页面file标签上传图片以及blob类型数据库存取。

我的jsp页面表单如下: <form name="form1" action="/YiQu/AddUserServlet?jurisdiction=1" method="post" enctype="multipart/form-data"> <table align="center"> <tr> <td>用户id:</td> <td>

聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer

事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一个专门用于支持文件操作的二进制对象 ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同 Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作 Blob 我们首先来介绍Blob,Blob是用来支持文件操作的.简单的说:在JS中,有两个构造

一个小时学会Git

最近要与部门同事一起做技术分享,我选择了Git,因为Git 是一种在全球范围都广受欢迎的版本控制系统.在开发过程中,为了跟踪代码,文档,项目等信息中的变化,版本控制变得前所未有的重要. 一.版本控制概要 1.1.什么是版本控制 版本控制(Revision control)是一种在开发的过程中用于管理我们对文件.目录或工程等内容的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术. 实现跨区域多人协同开发 追踪和记载一个或者多个文件的历史记录 组织和保护你的源代码和文档 统计工作

iOS Quartz: CGPathAddArc和CGPathAddArcToPoint函数

CGPathAddArc函数是通过圆心和半径定义一个圆,然后通过两个弧度确定一个弧线.注意弧度是以当前坐标环境的X轴开始的. 需要注意的是由于iOS中的坐标体系是和Quartz坐标体系中Y轴相反的,所以iOS UIView在做Quartz绘图时,Y轴已经做了Scale为-1的转换,因此造成CGPathAddArc函数最后一个是否是顺时针的参数结果正好是相反的,也就是说如果设置最后的参数为YES,根据参数定义应该是顺时针的,但实际绘图结果会是逆时针的! 比如,我们设置起点弧度为0,终点弧度为1.5

总结PowerShell的常用命令

命令1: #连接Azure订阅账户 Add-AzureAccount #获取所有在连接着的Azure订阅 Get-AzureAcount Get-AzureSubscription #设置当前的Azure订阅账户 Select-AzureSubscription -Name 'Free Trial' #获取当前订阅中的所有存储账户 Get-AzureStorageAccount #检验服务名称是否可用 Test-AzureName -Service "test323" #使用Power

canvas压缩、裁切图片和格式转换的方法

按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js文件 --> <script type="text/javascript" src="./compressImage.js"></script> <!-- input标签 --> <input type="fil

Blob 存儲文件,读取到页面显示

<body><% //获取图片对象(根据主键)的sql语句String showImage = " select * "+ " from 存放图片的表 "+ " where id='1' " ; BufferedInputStream inputImage = null; try{ //conn为一个Connection对象Statement st = conn.createStatement(); //获取结果集ResultS

(转载)VB 查询Oracle中blob类型字段,并且把blob中的图片以流的方式显示在Image上

原文摘自:http://heisetoufa.iteye.com/blog/504068 '模块代码 Private Declare Function CreateStreamOnHGlobal Lib "ole32" (ByVal hGlobal As Long, ByVal fDeleteOnRelease As Long, ppstm As Any) As Long Private Declare Function OleLoadPicture Lib "olepro3