Save Javascript Image result in a container field

[Ron Cates]

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 April 8, 2021 by Ron Cates

[comment]

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.

 

[Ron Cates]

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.

 

[Ron Cates]

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.

[rivet]

attached is a sample -- FileMaker 19 required 

 

qr generate [rivet].fmp12.zip

Edited April 10, 2021 by rivet

[Ron Cates]

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