11 Replies Latest reply on Dec 22, 2014 8:50 PM by madmike6537

    Encoding a picture in custom URL in Webviewer


      Hi Guys,


      I am completely stuck and need some help. I am trying to put a picture in custom URL calculation in my webviewer. How can I do this? I am currently trying to use the base64 data of the image in a text field. The problem is that is has + signs in it, and I think its causing filemaker some issues. The code runs fine in other web browsers, this is the only thing I can think of because the documentation seems to indicate that plus signs might be a problem.


      So if that sounds like the issue, how can I get around that? I have tried putting the picture in a container file, and then with a seperate field using the Base64Encode(container field) and then in my javascript using this:


      backgroundPic.src =  'data:image/png;base64," & Overview::bImageData &"';


      The webviewer still comes up blank though. When I extract the source code the image data seems messed up, it ends up on a bunch of seperate lines and still has the plus signs in it.


      Anyone have any experience embedding pictures into custom webviewer code?

        • 1. Re: Encoding a picture in custom URL in Webviewer

          Please try

          backgroundPic.src =  'data:image/png;base64," & Substitute ( Overview::bImageData ; [ Char ( 10 ) ; "" ] ; [ Char ( 13 ) ; "" ] ) &"';
          • 2. Re: Encoding a picture in custom URL in Webviewer

            Thank you very much for the reply. When I try that and extract the source data from the webviewer and paste it into my IDE it shows like this, with a bunch of paragraph's in between the text. Does filemaker prefer the text to have returns like that?


            Its still not loading unforunately Been working on this for days.




            Also appears to still have the plus signs.


            I do have the "automatically encode url" checked, not sure if that would cause problems.


            I removed all the returns and spaces out of the code, and ran it, and it runs perfectly in a webbrowser without changing a single thing in the code from filemaker. But it wont run in filemaker webviewer. Hmmm.

            • 3. Re: Encoding a picture in custom URL in Webviewer

              When a Base64Encode text contains LF or CR , it's NG.

              • 4. Re: Encoding a picture in custom URL in Webviewer

                This simple calc works for me:



                <div>Here's a Base64-encoded picture</div><br>

                <img style='width:200px; height:auto;' src = 'data:image/png;base64," & Base64Encode ( Overview::bImage ) & "'/>

                <div>End of story</div>"

                • 5. Re: Encoding a picture in custom URL in Webviewer
                  Mike Duncan

                  The following article may help. There is also a sample file to download and inspect.






                  • 6. Re: Encoding a picture in custom URL in Webviewer

                    Edit: Its now loading after a reboot of filemaker.


                    When I view your sample file, the webviewer is blank. Is the image showing in there for you? I wonder if something is wrong with my filemaker program :/


                    I should note, I am using windows so from the docs, my understanding is it uses a different browser for the web viewer.

                    • 7. Re: Encoding a picture in custom URL in Webviewer

                      Restarted Filemaker and now its loading - I will look through the file and see if I can find where I am going wrong, thanks.


                      Thank you Mike - strangely enough, the webviewer in the sample file from your site is showing up blank for me. I wonder if its an issue with my filemaker program itself. The spinning wheel only shows up on the container tab.

                      • 8. Re: Encoding a picture in custom URL in Webviewer

                        Your calc works, but he is using javascript, it doesn't allow wrapping line in text literal.

                        • 9. Re: Encoding a picture in custom URL in Webviewer

                          It seems the issue is not just with my image, its related to a library I am using called KineticJS. Basically, filemaker no longer likes my library. I had it working before but I cant seem to get it to work anymore.


                          I am not sure why though. I have the library in a script held within a field, so length shouldnt be an issue I wouldnt think since the field can hold 1 billion characters. That is definitely what is causing the problem, I just dont know if its possible to get filemaker to like this library I am wanting to use again.

                          • 10. Re: Encoding a picture in custom URL in Webviewer

                            Hi Mike,


                            Having seen the progression of your forum posts w.r.t. to WebViewer techniques, I am fully confident that you will be able to discover the issue currently at hand and work around it.


                            That said, if you'd like some help, I'm sure that lots of us would be happy to lend a hand if you can offer some additional details.


                            Given that you had the library working for you at one point, you are in a pretty good position to troubleshoot.  My general advice would be to simplify your code back to something that works, and then start adding the complexity in piece by piece.  This may mean starting with the most basic example of loading the library in question and doing something extremely simple with it.  Even so, having anything that works as a starting point means that you will be able to get to the bottom of the issue, and as I said, I am confident in your ability to figure it out.


                            Best wishes with this.  Let us know if we can be of help.


                            Kind regards,







                            Supposing you get to that crucial point where you have figured out what added step breaks things:  My recommendation in such a case would be to make sure that your code that is breaking is being executed within a try/catch block, and then use alert() to show you the error message while running the code within the WebViewer.  Also, the technique that Mike Duncan mentioned in another post of yours regarding grabbing the source from the WebViewer and running in a browser is always great to do, though I suspect that you may already be doing this...

                            • 11. Re: Encoding a picture in custom URL in Webviewer

                              Thanks for the reply Steve. Sorry I know I have a couple posts floating around surrounding the webviewer and you guys have been extremely helpful trying to figure it out along with me.  Its funny, I trim some code, it loads. I change something, it doesnt load. I go back to when it was working, and it doesnt load - even though its exactly the same as when it was working. One day I log in, and it works out of no where for a day. Then it fails again.


                              Its just so strange. Sometimes if I restart filemaker it will load, the next minute it wont. So frustrating especially when it loads flawlessly in every browser I have tested.


                              Anyway I really do appreciate all the help you guys have been. I am probably going to just go a different direction and try to eliminate this library all together as it seems to be the root of all the issues right now and I am out of ideas on how to fix it.