Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Convert local images to base64

I have uploaded a number of PNGs to the resources folder for use in my app. They are working fine.

 

Now I would like to use them as the icon in a <TextImageRow>. This (https://community.fitbit.com/t5/SDK-Development/Settings-Select-with-TextImageRow/td-p/3607886) doesn't address my issue as the icon property of TextImageRow expects a URL not a local file reference.

 

This (https://community.fitbit.com/t5/SDK-Development/Can-I-use-TextImageRow-with-a-local-asset/m-p/228564...) seems to suggest a workable option. However, I would prefer to generate the icon data through the app, not hardcode it into the app (allowing for easier image changes). 

 

I have tried creating a <canvas> (so that I could use https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) but document.createElement() doesn't appear to work on the fitbit platform.

 

I've also tried using FileReader (https://stackoverflow.com/a/58952747/999430) but FileReader doesn't appear to be resolvable on the fitbit platform.

 

What should my next step be or is this simply not possible?

Best Answer
0 Votes
1 REPLY 1

It may be possible. If you can get your images into SettingsStorage, they'll be saved in there as Base64. I think you can then refer to that data when populating yourTextImageRows.

 

In general, bear in mind that the watch doesn't have an HTML DOM and doesn't have a browser, so off-the-shelf solutions that work in other environments may not apply here.

Peter McLennan
Gondwana Software
Best Answer