delphi 官网上开始也来越多的介绍delphi与extjs 结合的例子,今天我就把官方的例子翻版一下。

官方使用C++builder 和webbroker 实现

我使用kbmmw 来实现一下。

老规矩,先要实现服务器端,这个服务器端也很简单,就是把一个图片文件转换成base64,然后封装成json 输出到浏览器上。

直接代码:

function Twebsrv.getimg: string;
var
mybase64:TBase64Encoding;
myfs:Tfilestream;
myss:Tstringstream; begin mybase64:=TBase64Encoding.Create();
myfs:=Tfilestream.Create('D:\picture\1.jpg',fmOpenRead );
myss:=Tstringstream.Create;
try mybase64.Encode(myfs,myss ); result:='[{"img":"data:image/jpeg;base64,'+myss.DataString+'"}]'; finally
mybase64.Free;
myfs.Free;
myss.Free; end;
end;

再处理一下对应的http get 操作

function Twebsrv.Performget(ClientIdent:TkbmMWClientIdentity; const AURL:string; const Args:array of Variant):Variant;
var
mystringstream:Tstringstream;
MimeType,s,scallback:string;
Charset,tablename:string;
qv:TkbmMWHTTPQueryValues;
dataurl,mysql,swhere:string;
I: Integer;
begin qv:=TkbmMWHTTPQueryValues.Create;
dataurl:=args[];
qv.AsString:=Args[];
if length(Args)< then
kbmMWRaiseException(KBMMW_ERR_SERVICE_HTTP_URLMISSING,'Missing URL.'); try if args[]='/version' then
begin
result:='kbmmw 5.03';
exit;
end; if args[]='/getimg' then
begin
s:=getimg; scallback:=qv.ValueByName['callback'];
if scallback<>'' then
result:=scallback+'('+s+')'
else
Result:=s;
exit; end; ...... result:=inherited Performget(ClientIdent,aurl,Args) ;
finally
qv.Free; end;
end;

编译运行,在浏览器里面输入http://localhost/getimg.

输出正常,服务器端搞定,下面设计extjs.

加一个datastore.

设置对应的属性。

在view 里面建立对应的控件

并建立按钮的点击事件

Ext.define('MyApp.view.MyFormViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myform', onButtonClick: function(button, e, eOpts) {
var me = this;
var store = Ext.getStore('MyJsonPStore'); store.load({
callback: function (records) {
var img = me.lookup('xalionimg');
img.setSrc(records[0].get('img'));
}
});
} });

ok,发布这个应用。

在浏览器里面输入http://localhost/index.html

点击按钮,就可以显示出来图像了

ok, 搞定了。

剩下的就是学习extjs 的知识了。

kbmmw 与extjs 通过JSON Base64 显示图片的更多相关文章

  1. Android开发——获得Json数据,并显示图片

    流程介绍 使用okhttp网络框架进行get请求,获得json数据 //一个封装好的工具类的静态方法 public static void sendOkHttpRequest(final String ...

  2. 在HTML中显示base64 img 图片

    base64的图片可以直接显示在网页上面 <img src=“data:image/png;base64,******************************************** ...

  3. Base64编码图片存取与前台显示

    需求:将Base64编码图片以BLOB类型存入数据库,需要时取出显示 后台: String base64str=new String(log.getRequest_imgdata());//log为实 ...

  4. json序列化.xml序列化.图片转base64.base64转图片.生成缩略图.IEnumerable<TResult> Select<TSource, TResult>做数据转换的五种方式

     JSON序列化 /// <summary> /// JSON序列化 /// </summary> public static class SPDBJsonConvert { ...

  5. Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示

    Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示 在 开发中遇到应用c#及asp.net的在的webservice 保存图片并以xml文件形式现实出来 ...

  6. 微信小程序开发——base64位图片显示问题

    前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...

  7. kbmmw 中简单返回 extjs 数据JSON

    以前,我们通过自己写json 来返回数据表的内容.在delphi 10.2.2中,官方自带了一个FDBatchMoveJSONWriter1 来直接处理数据库内容.把结果推送到浏览器客户端. 今天我们 ...

  8. Extjs显示图片

    1.首先做一个容器 xtype : 'container', // 第2行 anchor : '100%', layout : 'column', items : [{ columnWidth : 0 ...

  9. kbmmw 与extjs 的初次结合

    前面写了extjs 的安装,今天写一下kbmmw 与extjs 的结合,参照delphi 产品经理marco文章 . 由于extjs 设计时要读取服务器端的数据,所以先要做一个rest 服务器. 先要 ...

随机推荐

  1. awk技巧 nginx access.log

    1.1 介绍 awk其名称得自于它的创始人 Alfred Aho .Peter Weinberger 和 Brian Kernighan 姓氏的首个字母.实际上 AWK 的确拥有自己的语言: AWK ...

  2. as3.0两点之间简单的运动,斜着运动,任意两点

    import flash.utils.Timer;import flash.events.TimerEvent;//fixed结束点//sprite初始点var fixedX:Number = fix ...

  3. poj1942(求组合数)

    题目链接:http://poj.org/problem?id=1942 题意:实际上这道题就是求C(n+m,n). 思路:n.m的范围在unsigned中,所以不能递推计算组合数,可以采用公式C(a, ...

  4. Centos7在虚拟机中扩展磁盘空间

    说明 情况:已经在VirtualBox虚拟机创建了一个磁盘并已经装好了系统,发现磁盘空间太小,需要再添加一个磁盘的大小.或者说Centos7系统需要扩展磁盘空间. 步骤 1.VirtualBox新建磁 ...

  5. Postman 测试swagger类接口技巧

    测试情景: 公司的项目接口越来越多,由于开发周期短,时间紧,缺乏接口文档,直接使用swagger记录所有接口信息.那么: 1. 我们如何更快的测试动辄300+数量的接口,如何分组管理和维护这些接口? ...

  6. WdatePicker控件Javascript取得当前时间、取得减30分钟时间

    1.取得当前时间 function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var se ...

  7. c# 文件过大时清空原有内容重新写入

    FileStream fs = new FileStream("E:\\Test\\HistoryData.txt", FileMode.Append, FileAccess.Wr ...

  8. Codeforces Beta Round #61 (Div. 2)

    Codeforces Beta Round #61 (Div. 2) http://codeforces.com/contest/66 A 输入用long double #include<bit ...

  9. [Java学习]反射机制(待续226)

    反射机制相关的类.反射机制的作用 获取Class类型对象的三种方式

  10. Cisco VSS

    1.原理 VSS是将两台及以上的物理设备虚拟成逻辑上的一台,可类比堆叠.VSS在控制层面上两个交换机有主从之分,但在数据面上处理是双活的.无论是从网络控制层面和管理视图上在网络上都是一个单独的设备实体 ...