Author: h.mohri
Output to JSON Base64 Image Data Reading Browser.
I use Ext JS. And the JSON server is C++Builder bcc32.
Table of Contents
Create a standalone new project for WebBroker.
Add action on TWebModule side.
PathInfo is set to "/img".
It is a code to output JSON corresponding to CORS.
Code that can be compiled with bcc32. For CORS please refer to the following URL.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<span class="synPreProc" style="color:#9355e6;">#include </span><span class="synConstant" style="color:#ff6666;"><memory></span> <span class="synPreProc" style="color:#9355e6;">#include </span><span class="synConstant" style="color:#ff6666;"><System.NetEncoding.hpp></span> <span class="synPreProc" style="color:#9355e6;">#include </span><span class="synConstant" style="color:#ff6666;"><System.Json.hpp></span> <span class="synType" style="color:#3ec63e;">void</span> __fastcall TWebModule_main::WebModule_mainWebActionItem1Action(TObject *Sender, TWebRequest *Request, TWebResponse *Response, <span class="synType" style="color:#3ec63e;">bool</span> &Handled) { <span class="synType" style="color:#3ec63e;">const</span> String filename = <span class="synConstant" style="color:#ff6666;">"90020_Ballistoides_conspicillum.jpeg"</span>; std::tr1::shared_ptr<TMemoryStream> m1(<span class="synStatement" style="color:#d88a17;">new</span> TMemoryStream()); std::tr1::shared_ptr<TJSONArray> ja(<span class="synStatement" style="color:#d88a17;">new</span> TJSONArray()); <span class="synStatement" style="color:#d88a17;">try</span> { m1->LoadFromFile(filename); String ext = ExtractFileExt(filename).Delete0(<span class="synConstant" style="color:#ff6666;">0</span>,<span class="synConstant" style="color:#ff6666;">1</span>); TStringStream* m2 = <span class="synStatement" style="color:#d88a17;">new</span> TStringStream(); TNetEncoding::Base64->Encode(m1.get(), m2); String out = StringReplace(<span class="synConstant" style="color:#ff6666;">"data:image/jpeg;base64,"</span>,<span class="synConstant" style="color:#ff6666;">"jpeg"</span>,ext,TReplaceFlags() << rfReplaceAll) + StringReplace(m2->DataString, <span class="synConstant" style="color:#ff6666;">"</span><span class="synSpecial" style="color:#c000c0;">rn</span><span class="synConstant" style="color:#ff6666;">"</span>, <span class="synConstant" style="color:#ff6666;">""</span>, TReplaceFlags() << rfReplaceAll); m2->Clear(); Response->ContentType = <span class="synConstant" style="color:#ff6666;">"application/json; charset=UTF-8"</span>; Response->SetCustomHeader(<span class="synConstant" style="color:#ff6666;">"Access-Control-Allow-Origin"</span>, <span class="synConstant" style="color:#ff6666;">"*"</span>); Response->SetCustomHeader(<span class="synConstant" style="color:#ff6666;">"Access-Control-Allow-Headers"</span>, <span class="synConstant" style="color:#ff6666;">"X-Requested-With, X-PINGOTHER, Content-Type"</span>); ja->AddElement(<span class="synStatement" style="color:#d88a17;">new</span> TJSONObject(<span class="synStatement" style="color:#d88a17;">new</span> TJSONPair(<span class="synConstant" style="color:#ff6666;">"img"</span>,out))); m2->WriteString(StringReplace(ja->ToJSON(), <span class="synConstant" style="color:#ff6666;">"</span><span class="synSpecial" style="color:#c000c0;">\</span><span class="synConstant" style="color:#ff6666;">"</span>, <span class="synConstant" style="color:#ff6666;">""</span>, TReplaceFlags() << rfReplaceAll)); Response->ContentStream = m2; } <span class="synStatement" style="color:#d88a17;">catch</span>(Exception& e1) { Response->Content = e1.Message; } } |
The output JSON is as follows.
|
1 |
Ext JS design.
Create image and button screens using Sencha Architect.
Add Store.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Ext.define(<span class="synConstant" style="color:#ff6666;">'jsonimage1.store.Store1'</span>, <span class="synIdentifier" style="color:#51cfcf;">{</span> extend: <span class="synConstant" style="color:#ff6666;">'Ext.data.Store'</span>, requires: <span class="synIdentifier" style="color:#51cfcf;">[</span> <span class="synConstant" style="color: #ff6666;">'Ext.data.proxy.Ajax'</span>, <span class="synConstant" style="color: #ff6666;">'Ext.data.reader.Json'</span> <span class="synIdentifier" style="color: #51cfcf;">]</span>, constructor: <span class="synIdentifier" style="color:#51cfcf;">function</span>(cfg) <span class="synIdentifier" style="color:#51cfcf;">{</span> <span class="synIdentifier" style="color:#51cfcf;">var</span> me = <span class="synIdentifier" style="color:#51cfcf;">this</span>; cfg = cfg || <span class="synIdentifier" style="color:#51cfcf;">{}</span>; me.callParent(<span class="synIdentifier" style="color:#51cfcf;">[</span>Ext.apply(<span class="synIdentifier" style="color: #51cfcf;">{</span> storeId: <span class="synConstant" style="color: #ff6666;">'Store1'</span>, proxy: <span class="synIdentifier" style="color: #51cfcf;">{</span> type: <span class="synConstant" style="color: #ff6666;">'ajax'</span>, url: <span class="synConstant" style="color: #ff6666;">'http://localhost:8080/img'</span>, reader: <span class="synIdentifier" style="color: #51cfcf;">{</span> type: <span class="synConstant" style="color: #ff6666;">'json'</span> <span class="synIdentifier" style="color: #51cfcf;">}</span> <span class="synIdentifier" style="color: #51cfcf;">}</span> <span class="synIdentifier" style="color: #51cfcf;">}</span>, cfg)<span class="synIdentifier" style="color: #51cfcf;">]</span>); <span class="synIdentifier" style="color:#51cfcf;">}</span> <span class="synIdentifier" style="color:#51cfcf;">}</span>); |
Create a button event for Ext JS.
|
1 2 3 4 5 6 7 8 9 10 11 |
onButtonClick1: <span class="synIdentifier" style="color:#51cfcf;">function</span>(button, e, eOpts) <span class="synIdentifier" style="color:#51cfcf;">{</span> <span class="synIdentifier" style="color:#51cfcf;">var</span> me = <span class="synIdentifier" style="color:#51cfcf;">this</span>; <span class="synIdentifier" style="color:#51cfcf;">var</span> store = Ext.getStore(<span class="synConstant" style="color:#ff6666;">'Store1'</span>); store.load(<span class="synIdentifier" style="color:#51cfcf;">{</span> callback: <span class="synIdentifier" style="color:#51cfcf;">function</span> (records) <span class="synIdentifier" style="color:#51cfcf;">{</span> <span class="synIdentifier" style="color:#51cfcf;">var</span> img = me.lookup(<span class="synConstant" style="color:#ff6666;">'json_img'</span>); img.setSrc(records<span class="synIdentifier" style="color:#51cfcf;">[</span>0<span class="synIdentifier" style="color: #51cfcf;">]</span>.get(<span class="synConstant" style="color:#ff6666;">'img'</span>)); <span class="synIdentifier" style="color:#51cfcf;">}</span> <span class="synIdentifier" style="color:#51cfcf;">}</span>); <span class="synIdentifier" style="color:#51cfcf;">}</span> |
Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Free Delphi Community Edition Free C++Builder Community Edition
