How to get a bitmap from a TWebImageControl

Good morning,

I am trying to make a simple report on a TPaintbox. It consists of a few tabular overviews and a picture. I have loaded this picture in a TWebImageControl and I am now trying to draw it on that Paintbox,

To do that, I tried to convert the content of the image to a bitmap, but the bitmap does not appear on the paintbox. Closer investigation showed the Bitmap size was 0. Another closer look showed that the when decoding the base64image string of that image results in a png format, where I was expecting a binary (pixel) representation of the image.

How to transform the image information to a bitmap. Below is one attempt that failed. Below also an excerpt of what appears in the decoded base64image of the image.

I was looking to something much simpler: in VCL, an image contains a TGraphic, which has a bitmap. This doesn't seem to exist in TWebImageControl. Maybe I am looking at wrong places or missed something.

I really would appreciate if you can give me some hints to solve this.

Kind regards,

Michel Huybrechts
Micriconsult BV

function TReporting.Image2Bitmap(TheImage: TWebImageControl): TBitmap;
Converts an image to a bitmap.
OneBase64: TBase64Encoding;
fs: TStringStream;
ImgStr: UnicodeString;
begin { TReporting.Image2Bitmap }
OneBase64 := TBase64Encoding.Create;
ImgStr := OneBase64.Decode(TheImage.Base64Image);
fs := TStringStream.Create(ImgStr);
fs.Position := 0;
Result := TBitmap.Create;
end { TReporting.Image2Bitmap };

"‰PNG IHDR\r¨f IDATx^í]a|\ÅÑIw:éԛÕ%÷Þm\qÁà‚±1JJ’B )’P„$ôÞ nlÀ¸aÜ;¬Þë÷ûïÝ;Ÿ¥;Ýî+§÷¤üˆŸ}[fÿ»3ÛfgB赗ÛH’D@"Ð#‘ Gö»l´D€! €Œ€T=¸óeÓ%RÈ1 èÁHЃ;_6]" €Œ€T=¸óeÓ%RÈ1 èÁHЃ;_6]" €Œ€T=¸óeÓ%RÈ1 èÁHЃ;_6]" €Œ€T=¸óeÓ%RÈ1 èÁHЃ;_6]" €Œ€T=¸óeÓ%RÈ1 èÁHЃ;_6]" €Œ€T=¸óeÓÕ!m³±Œ‘aaêõ¾£Ü¿ãûuU77««(¹¤È²Šî…À}ûQXH Š‰¥»5nLÅØ\ßã= >gÕ§´úD±i À´]#3+-¦ôˆ.öÎûü3ú¬¸ˆ+mW$’ +P—uZÕ³fӌ^½¸Úpõº¯éÕ£‡¹ÒvE"©ºuY§¥øìœóhVjWeܹƒ~»s;WÚ®H$@W .ë´4¯LžJWåöæjÃûvÒý;¶q¥íŠDRtê²NK#ðÛá#éá#¸ÚðïCßÑÍe7p¥íŠDRtê²NK#pïaôÇQ£¹Ú°æÄ š¹j%WÚ®H$@W .ë´4WääÒkSÎæjÆS§hÒÊe\i»"‘T]º¬ÓÒÌì•JŸÏ:« Åõõ”öþ;\i»"‘TAB=Æf#[¨Ëj,!<ÜSk‚Ýõ½¿ª’ªLl1$˜,Qͤ¤dZ7{.7¯!¯¿Â6Ø ¥0ñsRSÉæ6íMŠ éÈøO­£Üß7m\Oߔž2eY´^¤FDЁRske+²ª¹Éó]ÚØ試¬±}ÏY½J¯ªu/GÝ!=]àñ/¦,§“«³›Œr5¢a%zjüYTÝÜÂZ|ÈËÞ{y¹a…íåe¦GD»HÄblñW_Ò»yÇäF-舀TŽŠ•çœK祦qÕv‹1®FÈD–C@*»ì…ISèºÞ}¸jøÃî]tßö­\ie"‰€^H ’>ʱûßáCtÆur#‹–È-@PÇÀ}C‡ÓC#GqÕiv‹1®FÈD–C@®ì²ï÷éKÿ8™«†¯KJhê§Ë¹ÒÊD½ @/$}”#b1v´¦†zô¾ÜÈ¢%rÔ1pVbmœ3»N3[Œq7B&´r``w¥8tââKϨáD}½çï'\ߍ­­TÖØHp%ɚÀ¨â¦ÞánÐx|‡†šÖ-˜T·•3Ï¥²¦F&ä ½žwWV²ïږfÂOåéßfK¯efS”-Œ•”∠äaûÎuF‘Óí87Šœa6½ìcÏСj݊ @7(}4$6ŽŽÖÖP­|èc0ҁ‹Ç[e–Æw´Û‹¯’³º¹‰VWa.ȝâäŗR²Ã%ô¨ï’è°@فÊÓëw©ôBR–Ó%¤EDzêMs{ê ¥„p—bùè~} aU69ßgzö-i¨§eE…´¼°€Ë—Ã÷®dåóYßzHÀÓ{2MPPfçh»ðŒ„ÙZyM™èpxö؃cc=¼ r;ÃÂ(ÇÅþÝi£l÷7O#N54Ð͛ÖÓ{yy“Zxõ‰rՈæ®^E+Š %úïRrYa{’¶oN‹Œdþöñw6[‡;Ø7OrÏØ9N'‹ÊcAP!°Hä±×6n ç}¨È ÿ.@Ð!—,aÆÄ҈¸xK£ã 38"ìt5aüÞÛÙX1ó\šfíÇ^Rì枑Km%Ìf]G¨k†M<½Çþºä$A8´Òˆøxš–Ò‹(5«Wªg–×Z®žùyl2žŸ0‰&Œ‡Û»‡îÙú-OÒ ¦‘ ¨pwMeŽÐPÊp:ْadøWöØúD÷¿g{-±1K+tíúµ'—j õAà¯é݇.ÈÈ4t¯–G%æaïRA]]§Åˆ<öz7ï8-þê­léžÝ!5O™‘N•OCcãi@LeE:)ÒÆþ¹„þ´Â@œk9É/×ôîM7õíÏx1;ñ´õžACè¯cÆr5Ŭ½¤àê>ãápKYnÃ}؆S%š+s„…1G$sÒÒ ~ ±Ïփ.[û%½}\ÜkѐØXúQÿts¿þ¦žõ½1š·æsvØ]’•Mïœ=Ú-ee4vù'\iƒ™H€ /²XþƺCIÃDXúLg$E†¹®ºúGÇÐùkŸ>wÆ2ʾ¦w_º¡o_Ý_©ïÞm[éO{v !¥ö§Qc¸Ci nâ[6m çv~j/òØÎB“Þ}Ë@ŽÕ-€:܄r-›1‹áž=vfd$Eø¹ÆÊþð=Ê«­*_IœAwDwâ·|U»3‰º-ƒÂÃ>ù®AƒµTÛ%yyÚ:,.Žvž¿€›?žƒEîÂtJØ#–Ƚü˜pW)|õGÛWswÏÞÓWa¶{‡£»6DøQç$¸/ç¥õ@e3Î0~xùP“îoûöÒÝ[6wš¶µ—]Á]|êûï÷c0îŒ&ì6 WD„gYÝ+ÂAîk,o+0œnƒ"la”áeBêï¡êj:P]E›KKéxm.лðbRêT ÏÞÓW·öHk¨°‰d ‹§¦Í ¾Ñсš¬Ëïފ[鷆ÖV&pPøS““Ùƒ^z?ï8]Ìqj/¢Ü'­\®ËoexҙZ(朎°PJuw›½Ý6ßqv;á?½t–Ønà=yaãîÊ úêäIZ}¢˜>)ȧŠ¦&,ý¦±ûᦍôìÁBõáTÛÞö î•XDüû¬‰tS¿þj«òä«lj"„×RžNC ë[\þøñoõ-®W–ÞmÖ¸ôÔ·4³«<Œ‹ÅÙÙôàð‘Üüð¶µøâÅԋS±¨]Ýq3­"¡)Àyii”êpœäD¤Ñ'Ê5{©¥¤ï¬ÌÞxw÷ÖFÕËGÓËGŽ°Ð]jiÙÌY47-+;ÏÞ³}AŽËöýFðÀ«¶@ہ ³çªîeÌܛN¢et¤¦† ëê<wò…õuáV”A ž0VöÎ_è™<¥ßZVFc8Ní×ϞG“’Ç~¿âë¯ècG¹Ò+‘)üæÍè•ÊÚÌû¸"Xa€½“wœþ¼gyG}©ÿ™³&Ò-œ³!NÙqÚÎKSµuÞ|ò~ǛWM:žƒ¬ß!4Ûz󱿪ŠÞ:~ŒVі²Ræ(E/ÖòÆFJà8µYÝýrÛVzDðE¯¶û+Ç @D@ŒÄ_ù¯=BwmÙ̖£¢$b1öú±£tå×_qWqyN.½Îªš§P´O™U‹1Ûº™Àa èºõ_wZVh[æÎ'ïWz<õ" BiýiÏn‚ÕïÌÎ[6҉+Òó(»&N¡ëúðÅ~P³ºiŸš´¦P"¢¦‘zäÁ€||ÿ^B'ŠÎ;a f§á<Ä»÷TÊú×ø ôÃþxŠîKí½•´þT Õ¹ez÷¾º¨¾ŽêÜûm,ÅAGÜûkŽNH @” xnýf#½—w\4+wúÿMœB×s

TWebImageControl can return the image as base64 encoded PNG (the default browser format) via
WebImageControl.Base64Image: string;

A bitmap is in the browser not a universal supported format. Not sure if you really need the image in Windows bitmap format?

Some background on getting the picture as bitmap is here:

Good afternoon,

Thank you for coming back to me.

The problem I have is that I need to create a small report in a paint box. This consists of a few small tables (1, 2 or 3) and two images. I have those images loaded at design time. Now I want to draw them on the paint box.

The paint box has no method to draw an image either straight from a TImageControl of from a base64 string. That’s why I was looking for a solution to get the image into a bitmap, which I can then draw on the paintbox.

If a bitmap is not universally supported, is there any other way to draw the content of an image on a paintbox?

Kind regards,

Michel Huybrechts

Micriconsult BV

You would need to create a TGraphic instance.
You can set the TGraphic.URL to the data URL with this base64 data.
Then you can draw this TGraphic on the Canvas with Canvas.Draw(x,y,graphic);

Dear Sir,

Thank you for your answer.

However, there is still a problem remaining: a TGraphic object does not have a URL property. So, I tried to load it using LoadFromURL, but this method is asynchronous and there is no “OnLoaded” event property for a TGraphic.

How to make sure the picture is loaded properly in a TGraphic object?

Attached an example showing that the picture is not loaded immediately. When clicking the (copy) button the first time, the picture is not yet loaded. The second time it is. But how to know when the picture is loaded?

Kind regards,

Michel Huybrechts

Micriconsult BV (72.4 KB)

There is also TGraphic.LoadFromURL(AURL: string; ALoaded: TBitmapLoadedProc = nil); and this anonymous method is called when the image was loaded.

Dear Sir,

Thank you very much for this answer. This indeed makes the image appearing immediately on the paintbox.

Kind regards,

Michel Huybrechts

Micriconsult BV