7 Replies Latest reply on Sep 14, 2016 10:11 AM by sam_oda

    images and text in webviewer

    holstermedia@gmail.com

      I need to copy an image and text from filemaker...

      Sounds easy but my only solution so far is to export the container to the temporary path and then show it along with some text in a web viewer.

      Then a PC or Mac can select the web viewer contents and copy to clipboard.

       

      Any other solutions?

       

      It's all working well on the Mac - but I can't get the export or image src correct on a PC (Windows 7 client, windows server with image stored externally on E:)

       

      Stage 1 - export image:

      Case (

      Get ( SystemPlatform )=1;"filemac:/";

      Get ( SystemPlatform )=-2;"filewin:/";

      )

      &

      Get ( TemporaryPath )

      & "test.jpg"

      Export field contents to $path

       

      Stage 2 - display image and text

      web viewer content:

      "data:text/html,<img src='file:/" & Substitute ( Get ( TemporaryPath ) ; " " ; "%20" )& "test.jpg' width='100' height='100' />here's some text"

        • 1. Re: images and text in webviewer
          mikebeargie

          FIleMaker has a native function:

          FileMaker Pro 15 Help

          Base64Encode()

           

          If you Base64Encode your image, then you can pass that text string directly into your webviewer code like so:

          "data:text/html,<img src='data:image/jpeg;base64," & $baseimage & "'>here's some text"

           

          You can encode the image in one script step

          Set Variable [ $baseimage ; Base64Encode(YourTable::YourImageContainerField) ]

           

          Additionally you can grab the image format and change that in your code too:

          "data:text/html,<img src='data:image/" & $format & ";base64," & $baseimage & "'>here's some text"

          to switch between jpeg, gif, png, etc...

          1 of 1 people found this helpful
          • 2. Re: images and text in webviewer
            Magnus Fransson

            Hi mikebeargie,

             

            I just "copied and pasted" your code as a rough proof of concept for my self. Got it working for a PNG but not a PDF. Didn't bother to put more time in to it right now. (Can probably fix that later if I wish to.)

             

            What i like to know is if any one can direct me to some resource for which files are supported and how to do that?

             

            With best regards Magnus Fransson.

            • 3. Re: images and text in webviewer
              holstermedia@gmail.com

              thanks - that was my first solution but you can't copy the image and text in the webviewer on a pc

              I can only get copying to work when the src = an actual file rather than base64

              • 4. Re: images and text in webviewer
                mikebeargie

                The sample was only for images. Base64 PDFs you need to be careful with because it can cause crashes just from the massive size of conversion of a file into a text string. I'd recommend checking via script on the PDF size before you go down that route and limit it to <1mb PDF files.

                 

                Base64Encode() will encode anything that you throw at it. What you need is something that will DECODE it on the other end. The HTML <img> tag will do this via attributes passed to the src="" parameter, however PDFs are not images, so the decoder for <img> has no idea what to do when you feed that in.

                 

                You may want to experiment with the <embed> tag:

                <embed src="http://www.pdf995.com/samples/pdf.pdf" width="500" height="375" type='application/pdf'>

                and alternatively the <object>, <media> or <iframe> tags. Some stuff is not compatible with older systems (embed tag is HTML5), so you will need to experiment. Google leads to some people attempting to base64decode PDFs using something like:

                <object data="data:application/pdf;base64,JVBERi0..." type="application/pdf" width="100%" height="100%"></object>

                But I haven't come across anything that reliably works across all browsers.

                 

                For simple PDF display in a webviewer just on it's own? I actually recommend the "export to temp and display from there" method:

                How to show an externally stored pdf in the webviewer

                It's not compatible with FileMaker WebDirect though, but it's simple enough to download container content from there.

                1 of 1 people found this helpful
                • 5. Re: images and text in webviewer
                  mikebeargie

                  Well then, how about using a

                  <a href="fmp://">copy content</a>

                  link that will run a script in filemaker that copies the container content to the clipboard?

                   

                  FMP URL Scheme and the 13.0v2 Improvement | iSolutions

                  • 6. Re: images and text in webviewer
                    holstermedia@gmail.com

                    still no good - as I'm trying to get an image and text to the clipboard!

                     

                    this will then be pasted into emails and the text edited within the email...

                     

                    so any windows users out there? how do I export an externally stored image to the TempPath and then show it in a web viewer?

                    • 7. Re: images and text in webviewer
                      sam_oda

                      Simply, set $path to

                      Get(TemporaryPath) & "test.jpg"

                      1 of 1 people found this helpful