How can I set widget crop ratio based on JotForm input field?

Should not take you more than 30 minutes to complete all steps.


1. Get ahold of your form and export the form choosing "Source code" option. See the pic below.

fc59eebf16a50e01a7fb98b1cbf8d266.png

2. Copy the code as instructed and paste it into empty text file. 

Now this is the toughest part: we need to determine how JotForm named your height and width input fields. Open the form online, hit CTRL+SHIFT+C, move your pointer over to the input field and you'll see the highlight:
40a93965f0f7f3b38b62624a54f67770.png

In my case, ids are "input9" and "input10". (You can't see input10, but it's there, I promise)

3. Add following code excerpt to the end of the page:

<script>
function myHandler(){
var _cFieldFrame = document.getElementById("customFieldFrame_3");
var cropValueHeight = document.getElementById("input_9").value;
var cropValueWidth = document.getElementById("input_10").value;

var postmsg = {};

postmsg.cropValueHeight=cropValueHeight;
postmsg.cropValueWidth=cropValueWidth;
postmsg.type='cropUpdate';
postmsg = JSON.stringify(postmsg);
console.log(postmsg);

_cFieldFrame.contentWindow.postMessage(postmsg,'https://khazamov.github.io/uploadcare-jotform-widget/widget/');
};
onload = function () {
var w = document.getElementById('input_9');
var h = document.getElementById('input_10');

w.oninput = myHandler;
h.oninput = myHandler;
w.onpropertychange = w.oninput;
h.onpropertychange = h.oninput;
};

</script>

Replace "input9" and "input10" by the values you've got from step #2.

4. In your source code find the line that starts from _cFieldFrame.src and set it to following:

_cFieldFrame.src = "//khazamov.github.io/uploadcare-jotform-widget/widget/?qid=3&ref=" + encodeURIComponent(window.location.protocol + "//" + window.location.host);

Note, widget is not hosted on official repository, because I had to do certain modifications to accommodate your requirements. 
Here is an example of what such file might look like. This file can be pasted as a static HTML to any website constructor or Wordpress template.

5 - Optional step. You can do your own fork and take additional steps to increase security of cross-frame communication.

After following this mini-tutorial you should be able to set crop ratio relevant to chosen canvas width & height. Here isa demo. It actually uses the example file from step #4.