Мое требование - нажать кнопку «Отправить» -
- прокручивать элементы «‹ li >» на HTML-странице, получать URL-адрес объекта из каждого элемента «‹ li >», загружать изображение на холст и получать от него URL-адрес данных. Сохраните эти URL-адреса данных внутри скрытого поля на HTML-странице.
- Затем извлеките URL-адреса данных из скрытых полей, преобразуйте их в массив байтов и продолжите дальнейшую обработку.
Я стремился достичь нижеследующего пути...
1. Использование java-скрипта YUI3 (submitBehavior_js.js) для достижения первой части. Используется (событие «клик»)
submitButton.add(new submitBehavior_js('click',parameters));
2.Переопределение метода onSubmit() кнопки «Отправить» для достижения второй части.
onSubmit(target,form)
{
String[] imgArray = null;
imgdata = hiddenImageData.getValue();
imgArray = imgData.split(',');
.........
}
Я прошел через несколько потоков, и с моим практическим опытом java-код onSubmit() вызывается до submitBehavior_js.js, поэтому в скрытых полях не было данных изображения.
Итак, я попытался вызвать java-скрипт, используя событие «mouseup» вместо «щелчка». Это работало отлично, и java-скрипт запускается перед onSubmit() на контроллере калитки.
Однако мой код — это адаптивный веб, и он должен работать в браузерах на мобильных платформах. Очевидно, "mouseup" не пришел мне на помощь. Я пытался использовать события «touchend» и «gesturemoveend», как это предлагается в документации YUI3, но в обоих случаях код java калитки onSubmit() выполняется перед javascript.
Затем я попытался вызвать javascript, как показано ниже:
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(',');
.........
}
С приведенным выше фрагментом кода управление переходит к java-скрипту от контроллера Wicket, но возвращается к java-коду перед выполнением onLoad() элемента Canvas. Вот мой фрагмент java-скрипта... myCanvas - скрытый элемент в 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");
}
Порядок отображения/предупреждения следующий:
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
Поскольку при загрузке элемента Canvas выполняется после java-кода, очевидно, скрытая переменная данных изображения имеет нулевые значения... и я теряю захваченные/загруженные изображения пользователем. Есть ли причина такого странного поведения? или может быть мое понимание неправильно? Кроме того, лучший способ выполнить мою задачу. Цените свое время и помогите!!
