How to get a bitmap from a TWebImageControl

Huybrechts_Michel · June 29, 2021, 7:18am

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;
{
Abstract:
Converts an image to a bitmap.
}
var
OneBase64: TBase64Encoding;
fs: TStringStream;
ImgStr: UnicodeString;
begin { TReporting.Image2Bitmap }
OneBase64 := TBase64Encoding.Create;
ImgStr := OneBase64.Decode(TheImage.Base64Image);
FreeAndNil(OneBase64);
fs := TStringStream.Create(ImgStr);
fs.Position := 0;
Result := TBitmap.Create;
Result.LoadFromStream(fs);
FreeAndNil(fs)
end { TReporting.Image2Bitmap };

"PNG IHDR\r¨f IDATx^í]a|\ÅÑIw:éÔÕ%÷Þm\qÁà±1JJB )P$ôÞ nlÀ¸aÜ;îª¶¬Þë÷ûïÝ;¥;Ýî+§÷¤ü}[fÿ»3ÛfgBèµÛHD@"Ð# 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$ +PuZÕ³fÓ^½¸Úpõº¯éÕ£¹ÒvE"©ºuY§¥øìóhVjWeÜ¹~»s;WÚ®H$@W .ë´4¯LJWåöæ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ß2eY´^¤FDÐRske+²ª¹Éó]ÚØè©¦¬±}ÏY½J¯ªu/GÝ!=]àñ/¦,§«³r5¢a%zjüYTÝÜÂZ|ÈËÞ{y¹aíåe¦GD»HÄblñW_Ò»yÇäF-èTçKç¥¦qÕv1®FÈDC@*»ìISèºÞ}¸jøÃî]tßö\ie"^H >Ê±ûßáCtÃur#È-@PÇÀ}CÓC#GqÕiv1®FÈDC@®ì²ï÷éKÿ8«¯KJhê§Ë¹ÒÊD½ @/$}#b1v´¦zô¾ÜÈ¢%rÔ1pVbm3»N3[q7B&´r``w¥8tââKÏ¨áD}½çï'\ßTÖØHp%ÉÀ¨â¦ÞánÐx|Ö-T·3Ï¥²¦F&ä ½wWV²ïÚfÂOåéßfK¯efS-â äaûÎuFÓí87a6½ìcÏÐ¡jÝ @7(}4$6ÖÖP|èc0ÒÇ[eÆw´Û¯³º¹VWa.ÈâäÅR²Ã%ô¨ïè°@ÙÊÓëw©ôBRÓ%¤EDzêMs{ê ¥pbùè~} aU69ßgzö-i¨§eE´¼°ËÃ÷®dåóYßzHÀÓ{2MPPfçh»ðÙZyMèpxöØcc=¼ r;ÃÂ(ÇÅþÝi£l÷7O#N54ÐÍÖÓ{yyZxõrÕæ®^E+ %úïRrYa{¶oNdþöñw6[;Ø7OrÏØ9N'ÊcAP!°Hä±×6n ç}¨È ÿ.@Ð!,aÆÄÒ¸xK£ã 38"ìt5aüÞÛÙX1ó\fíÇ^RìæKm%Ìf]G¨kM<½Çþºä$A8´ÒøxÒ(5«Wªg×Z®ùyl20&Û»îÙú-OÒ ¦ ¨pwMeÐPÊp:ÙadøWöØúD÷¿g{-±1K+tíúµ'j õAà¯éÝ.ÈÈ4t¯G%æaïRA]]§Å<öz7ï8-þêléÝ!5ONOCcãi@LeE:)ÒÆþ¹þ´Â@k9É/×ôîM7õíÏx1;ñ´õACè¯cÆr5Å¬½¤àê>ãápKYnÃ}ØS%+s1G$sÒÒ ~ ±ÏÖ.[û%½}\ÜkÑØXúQÿts¿þ¦õ½1·æsvØ]Mï=Ú-ee4vù'\iH /²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ø¹ÆÊþð=Ê«*_IAwDwâ·|U»3º-ÂÃ>ù®AµTÛ%yyÚ:,.v¿?EîÂtJØ#È½üpW)|õGÛWswÏÞÓWa¶{£»6DøQç$¸/ç¥õ@e3Î0~xùPîoûöÒÝ[6w¶µ]Á]|êûï÷c0î&ì6 WDgYÝ+ÂAîk,o+0n"laáeBêï¡êj:P]EKKéxm.Ð»ðbRêT ÏÞÓW·öHk¨°d §¦Í ¾ÑÑ¬ËïÞ[é·ÖV&pPøSÙ^z?ï8]Ìqj/¢Ü'\®ËoexÒZ(æ°PJuw½Ý6ßqv;á?î«½tØnà=yaãîÊ úêäIZ}¢>)È§¦&,ý¦±ûá¦ôìÁBõáTÛÞö îXDüû¬tS¿þj«òä«lj"×RNC ë[\þøñoõ-®WÞmÖ¸ôÔ·4³«<ÅÙÙôàðÜüð¶µøâÅÔS±¨]Ýq3"¡)ÀyiiêpäD¤Ñ'Ê5{©¥¤ï¬ÌÞxw÷ÖFÕËGÓËG°Ð]jiÙÌY47-+;ÏÞ³}AËöýFðÀ«¶@Û ³çªîeÌÜN¢et¤¦ ëê<wòõuáVA 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´OU1ÛºÀa èºõ_wZVh[æÎ'ïWz<õ" BiýiÏnÕïÌÎ[6Ò+Òó(»&N¡ëúðÅ~P³ºi´¦P"¢¦zäÁ||ÿ^B'Î;a f§á<Ä»÷TÊú×ø ôÃþxîKí½´þT Õ¹ez÷¾º¨¾êÜûm,ÅAGÜûkNH @ xnýf#½w\4+wúÿMB×s

brunofierens · June 30, 2021, 9:59am

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:

Huybrechts_Michel · June 30, 2021, 11:40am

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

www.micriconsult.be

brunofierens · June 30, 2021, 3:40pm

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);

Huybrechts_Michel · July 1, 2021, 7:26am

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

www.micriconsult.be

Example.zip (72.4 KB)