My requirement is on Click of "Submit" button -
- loop through "< li >" elements on HTML page, get the objectURL from each "< li >" element, load the image on to Canvas and get dataURL from it. Store these dataURLs inside hidden field on HTML page.
- Then retrieve the dataURLs from Hidden fields, convert them to byte array and proceed with further processing.
I targeted to achieve below way...
1.Using YUI3 java script (submitBehavior_js.js) to achieve the first part. Used ("click" event)
submitButton.add(new submitBehavior_js('click',parameters));
2.Overriding onSubmit() method of "Submit" button to achieve second part.
onSubmit(target,form)
{
String[] imgArray = null;
imgdata = hiddenImageData.getValue();
imgArray = imgData.split(',');
.........
}
I have gone through several threads and with my practical experience, onSubmit() java code is invoked before submitBehavior_js.js and so, the hidden fields didn't have any image data.
So, I tried to invoke the java script using "mouseup" event instead of "click". This was working perfectly fine and java script is running before the onSubmit() on wicket controller.
However, my code is adaptive web and it should work across browsers on mobile platforms. Evidently "mouseup" din't come to my rescue. I tried to use "touchend" and "gesturemoveend" events as suggested by YUI3 documentation, but in both cases onSubmit() wicket java code is executed before the javascript.
Then, I tried to invoke javascript as below:
onSubmit(target, form)
{
target.appendJavaScript("new submitBehavior_js('click',<<parameters>>)");
System.out.println("Inside Submit method in wicket");
String[] imgArray = null;
imgdata = hiddenImageData.getValue();
imgArray = imgData.split(',');
.........
}
With above piece of code, control is going to java script from Wicket controller but comes back to java code before executing the onLoad() of Canvas element. Here is my java script snippet...myCanvas is an hidden element on HTML(style=display:none)
alert("Start here");
var imgArray[];
var lineCtr = 0;
for each LI List item (Say I have 2 items)
{
var imageObjectURL = node.get('children').getAttribute('href')
image = new Image()
image.onLoad = function() {
alert("Inside onload of image to canvas");
var canvas = document.getElementById("#myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillRectangle('white');
ctx.drawImage(image,700,600,0,0);
var data = ctx.toDataUrl();
imgArray[lineCtr] = data;
Y.one("#hiddenImageData").setAttribute('value',imgArray);
lineCtr = lineCtr + 1;
alert("finished here");
}
image.src = imageObjectURL;
alert("after assigning object URL. Completed List item");
}
The order of display/alert is as follows:
alert - Start here
alert - after assigning object URL. Completed List item
alert - after assigning object URL. Completed List item
JAVA Sysout - Inside Submit method in wicket
alert - Inside onload of image to canvas
alert - finished here
alert - Inside onload of image to canvas
alert - finished here
Because on load of Canvas element is executed after the java code, obviously the hidden Image Data variable has null values....and I am losing the captured/uploaded images by User. Any reason for this weird behavior? or May be my understanding is wrong? Also, a better way to accomplish my task. Appreciate your time and help!!
