Question

我的要求是点击“提交”按钮 -

循环“＆lt; li＆gt;” HTML页面上的元素，从每个元素获取objectURL “＆lt; li＆gt;”元素，将图像加载到Canvas并从中获取dataURL 它。将这些dataURL存储在HTML页面上的隐藏字段中。
然后从隐藏字段中检索dataURL，将它们转换为byte 数组并继续进一步处理。

我的目标是实现以下目标...

1.使用YUI3 java脚本（submitBehavior_js.js）来实现第一部分。使用（“点击”事件）

submitButton.add(new submitBehavior_js('click',parameters));

2.超越onSubmit（）方法的“提交”按钮实现第二部分。

onSubmit(target,form)
{
String[] imgArray = null;
imgdata = hiddenImageData.getValue();
imgArray = imgData.split(',');
.........
}

我已经经历了几个线程，根据我的实践经验，在submitBehavior_js.js之前调用onSubmit（）java代码，因此，隐藏字段没有任何图像数据。

所以，我尝试使用“mouseup”事件而不是“click”来调用java脚本。这工作得很好，java脚本在wicket控制器上的onSubmit（）之前运行。

但是，我的代码是自适应网络，它应该适用于移动平台上的浏览器。显然，“鼠标”不会来救我。我尝试使用YUI3文档中建议的“touchend”和“gesturemoveend”事件，但在两种情况下onSubmit（）wicket java代码都在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(',');    
.........
}

使用上面的代码，控制将从Wicket控制器转到java脚本，但在执行Canvas元素的onLoad（）之前返回到java代码。这是我的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

因为在Java代码之后执行Canvas元素的加载，显然隐藏的Image Data变量具有空值....并且我正在丢失用户捕获/上传的图像。有这种奇怪行为的原因吗？或者可能是我的理解错了？此外，一个更好的方法来完成我的任务。感谢您的时间和帮助!!

Answer 1

在我IAjaxCallListener onSubmit()中展示你想要做的JavaScript。这样就可以确保在执行{{1}}登录之前执行它。

在Wicket Framework上的Button onSubmit（）之前调用YUI3脚本

1 个答案: