数据库中对图片的保存可以采取二进制格式，也就是我们平常所说的 blob 类型 ( Binary large object)。当图片使用 blob 类型来存储的时候，OpenUI5 如何处理据呢？ 本篇就来作一个详细介绍。
使用 sap.m.Image 来显示图片
一般情况下，可以设置 sap.m.Image 的 src 属性，来显示一个本机或者网络的图片，比如：
var image = new sap.m.Image({
src: "http://sap.github.io/openui5/images/icotxt_white_220x72_blue_open.png"
});
也可以把图片二进制文件通过 Base64 来编码，变成一个字符串，sap.m.Image 支持这种基于 Base64 编码的格式：
var oDataImage = new sap.m.Image({
src: "data:image/gif;base64,R0lGODlhHwAeANU/AO1SReW2N+14Kf3YACOAulrAWtTW02Gh1uPIx/BkVFXKXu3t7bjZuoi9R7nV8fbOG8fBulSlWvh8ZlW0WvTu0aG8QqK92sGkdcWjoPr5+WyrUUaiV7q0oHWs2vrTCYOeiJ94QulCOYK34ceNifHEJfLWRuLf3tomHUWUzeQxLf/cDc1+dtzCOqKzo83o92mxbPSSjP/ohspCL2K1WG7Ga+k5NIGfWcbKKcu5ceTPBvDKAJfRkIyvjVvEXeV4af///yH5BAEAAD8ALAAAAAAfAB4AAAb/wJ9wSPwtDBCMEmJYFJ/QXwYx8kmuWIlvBMlEoaZVIptNmBMrw5eIObvfZkACgFn/MIA8/J3vj74jfYJycYMAIYh/TxCIiIaGjYg1NRBFCzYhNZGbk42TNSmhmiZELQogKZ+SNQkwrhICsbKzF0MLLwozMqmTKQAICy7CCxQlOg8PHh4DAyoPTj8QPQWnoikJCw4i29sOGSXKzOIqlT88CgXTuykhJg4HHdwdBxYUKuLjOFIv09Q2JydguIDXoaDBAw5i4GOmgkWGW/2ogTiBQASKAxgzHkAhgsLCZs8WzIjYQ4MMBBs1Zrxo7+MDEyILyJR5CiWKmzhxHmi58OWtzJkye8xA0IFATpwEOnj8SGJBhhdAZ+5wQMBozqoJPw5waC5qUANFq4pNylOcBxX6ok3wWoCGAQtjCVgwUWKhsgflfrKlweCtBQsGGFT46OFBAGg/WkxYu3eH4xcRcuC7+4ADkQURFrOduXiw2cKGEQuBkJkx2wkzlg1QVpgEiXJFWpQ2DXTCjdWUXVuOInuxb84NKD9wTWL3Fw4bIsz2zQIZcRIBjK8x8SG58ggbKjyHfkGNHSIGqm9IHqB8gAvdvXx/cgQCh/dMREMJAgA7"
});
oDataImage.placeAt("content");
这是一个 Google Chrome 浏览器的图标，通过 Base64 编码后，用 Image 控件来显示。
显示 Northwind data service 中的图片
我们先用 Postman 这个 Chrome 插件来看看 http://services.odata.org/V2/Northwind/Northwind.svc/Categories?$format=json 的 请求结果：
我们可以看到 Picture 是以 Base64 编码的字符串。那么，这种图片类型，OData 的元数据是什么类型的呢？ 看看 Northwind 的元数据，数据类型是 Edm.Binary。OData 对 Edm.Binary 就是用 Base64 编码来转换成字符串传输的。请参看：http://www.odata.org/documentation/odata-version-2-0/json-format/ 的描述。
接下来给出显示 Northwind OData Service 的完整代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="../resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.table, sap.ui.layout"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
// Application data
var sUrl = "https://cors-anywhere.herokuapp.com/" +
"services.odata.org/V2/Northwind/Northwind.svc/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sUrl)
sap.ui.getCore().setModel(oModel);
sap.ui.getCore().attachInit(function(){
var oImage = new sap.m.Image({
width: "200px",
src: {path: "Picture",
formatter: function(sValue){
var sBase64BMP = btoa(atob(sValue).substr(78));
var sDataUrl = "data:image/bmp;base64," + sBase64BMP;
return sDataUrl;
}
}
});
var oForm = new sap.ui.layout.form.SimpleForm({
content: [
new sap.m.Label({text: "Picuture"}),
oImage,
new sap.m.Label({text: "Category ID"}),
new sap.m.Input({value: "{CategoryID}"}),
new sap.m.Label({text: "Category Name"}),
new sap.m.Input({value: "{CategoryName}"}),
new sap.m.Label({text: "Description"}),
new sap.m.Input({value: "{Description}"}),
]
});
var oApp = new sap.m.App({
pages: [
new sap.m.Page("categoryPage", {
title: "Northwind Image Display",
content: [
new sap.m.Panel({
content: [oForm]
})
]
})
]
});
sap.ui.getCore().byId("categoryPage").bindElement("/Categories(1)");
oApp.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
对代码，解释两个部分：
SimpleForm:sap.ui.layout.form.SimpleForm这个控件在展示扁平数据时候还是蛮方便的，控件对不同字段默认采取Vertical layout, 每个字段包括 label 和 内容显示，默认采取Horizontal layout。Image的代码，采用的是绑定方式，绑定到Picture字段：
var oImage = new sap.m.Image({
width: "200px",
src: {path: "Picture",
formatter: function(sValue){
var sBase64BMP = btoa(atob(sValue).substr(78));
var sDataUrl = "data:image/bmp;base64," + sBase64BMP;
return sDataUrl;
}
}
});
为什么要加上 formatter 这段代码呢？ 原因是因为 Northwind 数据库中图片，前面78个字节是 OLE 相关的信息， 所以将数据通过 JavaScript 的atob 解码为字符串，截取 78 个字节后面的内容，再使用 btoa 还原为 Base64 编码。
运行后，UI 显示界面如下：
很可惜，Northwind OData service 并不支持数据的写入，所以我们还需要使用 mock server 来模拟。因为近期较忙，只能抽时间写一点，下一篇再来介绍含图片的 CRUD 实现。
