Jump to content

Save Javascript Image result in a container field


Recommended Posts

I am working on a very simple QR code in a web viewer using qrcode.js. The resulting Qr code can be dragged and dropped into a container field or I can right click on the web viewer and select "Save Picture as" and save it to my desktop. I would like to be able to automate this so that it automatically saves the resulting qr code to a container field. 

Interesting note, when i drag and drop into a container it results in a file called untitled.bmp, but when I right click on the web view and "Save Picture as" it saves as untitled.png. Not sure if that matters but I found it interesting.

 

I have been researching and have seen mentions of using FMP Url to get the javascript result content from a web viewer but I haven't found any source that actually explains how that is done.

Can anyone help me on this?

Thanks

 

 

 

QRCode.fmp12

Edited by Ron Cates
Link to post
Share on other sites

I've never done this myself, but I believe the necessary steps are:

In Javascript:

  • encode the generated image to Base64;
  • call a Filemaker script with the Base64-encoded string as the parameter;

In Filemaker:

  • decode the Base64-encoded string and insert the result into the container field.

Note that in version 19 you have the option to call a Filemaker script directly from Javascript, with no need to use the FMP URL protocol - see:
https://help.claris.com/en/pro-help/content/scripting-javascript-in-web-viewers.html

 

2 hours ago, Ron Cates said:

when i drag and drop into a container it results in a file called untitled.bmp, but when I right click on the web view and "Save Picture as" it saves as untitled.png.

 I believe that's the result of going through the Windows OS clipboard. You should be getting the original PNG using the method I outlined above.

 

Link to post
Share on other sites

That's about what I've got figured out as well from researching all day. I'm getting there. At this point I am able to call a filemaker script from within the javascript and I believe I have the script to decode the result into a container field. But what I'm stuck on now is how to encode the generated image to Base64 in javascript.

 

Link to post
Share on other sites

I was able to get this working beautifully on Mac using html2canvas.js

However, saving the png image does not work in FileMaker on windows. It works fine in my browser on windows but will not work in the FileMaker webviewer.

Link to post
Share on other sites

Thanks rivet!! That was exactly what I needed. I was able to use jquery.js to set the image in the container field. Works beautifully in Mac and Windows. 

Thank You

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.