kbmmw 与extjs 通过JSON Base64 显示图片

简介: delphi 官网上开始也来越多的介绍delphi与extjs 结合的例子,今天我就把官方的例子翻版一下。 官方使用C++builder 和webbroker 实现。 我使用kbmmw 来实现一下。

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

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

我使用kbmmw 来实现一下。

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

直接代码:

function Twebsrv.getimg: string;
var
  mybase64:TBase64Encoding;
  myfs:Tfilestream;
  myss:Tstringstream;

begin

    mybase64:=TBase64Encoding.Create(0);
    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[0];
    qv.AsString:=Args[2];
   if length(Args)<1 then
        kbmMWRaiseException(KBMMW_ERR_SERVICE_HTTP_URLMISSING,'Missing URL.');

  try

    if args[0]='/version' then
    begin
        result:='kbmmw 5.03';
        exit;
    end;

    if args[0]='/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 的知识了。

 

目录
相关文章
|
2月前
|
JSON API 数据格式
postman如何发送json请求其中file字段是一个图片
postman如何发送json请求其中file字段是一个图片
157 4
|
5月前
|
JSON 文字识别 数据格式
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
|
6月前
|
JSON 编解码 Apache
Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
66 1
|
7月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
|
JSON PHP 计算机视觉
php百度人脸识别param[image_template] is null使用BASE64图片类型json_decode返回NULL的处理解决方案
php百度人脸识别param[image_template] is null使用BASE64图片类型json_decode返回NULL的处理解决方案
138 0
|
JSON Java API
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
1074 0
基于Qt的音乐播放器(三)通过酷狗音乐的api接口,返回json格式歌曲信息(播放地址,歌词,图片)
|
JSON 算法 数据挖掘
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)1. 场景描述一直做java,因项目原因,需要封装一些经典的算法到平台上去,就一边学习python,一边网上寻找经典算法代码,今天介绍下经典的K-means聚类算法,算法原理就不介绍了,只从代码层面进行介绍,包含:rest接口、连接mpp数据库、回传json数据、下载图片及数据。
1235 0
|
JSON 数据格式 计算机视觉
用 opencv和numpy进行图片和字符串互转,并保存至 json
用 opencv和numpy进行图片和字符串互转,并保存至 json 转至 https://zhuanlan.zhihu.com/p/27349847 受 用 base64 进行图片和字符串互转,并保存至 json 作者启发,试了试使用opencv来读取图片,然后用numpy转为list,再转为json格式。
1747 0
|
JSON JavaScript 前端开发