Base64 Image from API to Image Control

1

I have a base64 encoded PNG image being returned from a webservice and I cant figure out how to get that to display in an image control.

I have tried experimenting with setting prop:handle, prop:text of both the base64 encoded and decoded values and that doesn’t seem to work.

I have also tried setting the handle of a blob to both encoded and unencoded values and then using blobtofile and that doesn’t seem to work either.

I also tried stringtheory .SetBytes and .ToBlob, but I have an unclear understanding on how that all works and ties together with the image control.

I must be doing something fundamentally wrong and I was hoping y’all could enlighten me.

On the web, I can do this like so:

<img src="data:image/png;base64, H4sIAAAAAAAAAPt/4/8DBgEvN083BkZGBgZGIGT4/4hJw9PZOT4gyN/N08cVLMEkwQAETAIMDLl5JUVB7k4KEZFRCgxIIDG5uIABNwCa8e0aiGRguKyLRx0uwJmSWpwMpD8AcUkR0HKgkSlAtkg6hF0BYidB2D0gdlFIkDOQvQDI1khHYichsctLCkqA7BMg9ckFRSD2HSDbJjenNBnhbgae1LzQYCAdAcQyDMUMQQzuDE5k+AEvQIRn/iIGBouvDAzMExBiSTMZGLa3MjBI3EKIqQD9wN/CwLDtfEFiUSJYiAWImdLSGBg+LWdg4I1kYBC+wMDAFY1pByIucPhVAexXd4Z8IExnyGFIBYp4MuQxJDPoAVlGDAYMhgxm/28zODP8pxQADWGk2JADDIIcDE0Mt5gZlRiYBBmZBRn/H2EQB6ZdRkaUYGZkYgZKaAoAUzojKzsrQpZRUEjR0DEwsbBx4sKDF5mUNj78EJQEVCqCZgAQgEQFMUVvMfAwMwItZxZksGd4BhPeNyd5vvbBtNc73/8CplfWzmU3LjJE9jzm732x0eSdT3CZQwOKKRvnvZ89MZnz4ScOEI/X9aOf4T1JpZcrmM5eQihkDjRPTt9f4OU3KXLu7XfxZVsf/wpKKm7Q3GYXpum5r+j026k96uUVzLe3L4y4vIpha//zNVN7rRaHdBz7efl8g2eP2aIzVxmY9HeIFd2V59hc8+8kwnqxt5svrMm8IphtdfLtpcq/cnc3HpDab22T9G+C69zpd0urD/nE92TOC3SaPPX3MsbMl6ev/l4UOWeZeqfJsTPvTqplP5CaMd9P0PpPxqFryWZrs0WfPpCQ2voveXLonEdz0qybxdI9s6Zc2v3o0b4Zh7S37eeMAFrBFDl3zuOTnhe+vX35Zbub3Mo++YQTd5WKO+aZPLWo2znbeH/pA7jHeV2Cfj6U3/TT60335r9FDAy66ZG6fiuYbs2ds/hgVllRPweQWQ1O4RuNJbwYNhtbLECPJeoA+/83AROCMYg6BQAA”>

2

?IMAGE1{PROP:ImageBits} = DecodedData

Note that PNG format isn’t supported in old Clarion versions (C6).

3

Hi Mike,

Thanks for your reply. That doesnt seem to be working for me. Im on C10. I also tried jpg format just to be sure it wasnt something funky with png’s.

Once thing I was unclear on from your answer is what datatype is DecodedData? Is this a string, blob or otherwise?

Also, possibly, I remember some weirdness with getting the image to refresh when the data is set on the fly. Is it possible your answer fixed it, but now I just need some fancy display(), Thiswindow.reset or otherwise?

Thanks,
Justin

4

Justin, as a sanity check have you decoded the return value and saved to disk and then open that with a image tool/viewer to make sure you have good data and are processing the correct bytes returned?
Make sure you have a good image outside of Clarion before working on the Image control usage.

5

Data type is of a string (or a reference to a string). Something like this:

sBits                           &STRING, AUTO
  CODE
  sBits &= DecodeBase64(b64data)  !- suppose that DecodeBase64 returns a string reference
  ?IMAGE1{PROP:ImageBits} = sBits
  DISPOSE(sBits)
6

Hi Justin - That isn’t PNG, it appears to be gzipped JPG
(EDITED out the image, in case that really is someone’s sig)

7

Thank you everyone. My main issue is that it was a Gzipped image. Someone said to do a sanity check and the online checker came back and said it was gzipped. So once I overcame that issue I was off to the races. You all rock!

1 Like