0

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

  1. 遍历 HTML 页面上的“<li>”元素，从每个“<li>”元素中获取 objectURL，将图像加载到 Canvas 并从中获取 dataURL。将这些 dataURL 存储在 HTML 页面的隐藏字段中。
  2. 然后从隐藏字段中检索 dataURL，将它们转换为字节数组并继续进行进一步处理。

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

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 脚本在检票口控制器上的 onSubmit() 之前运行。

但是，我的代码是自适应网络，它应该可以跨移动平台上的浏览器工作。显然“mouseup”并没有来救我。我尝试按照 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 元素的加载，显然隐藏的图像数据变量具有空值....并且我丢失了用户捕获/上传的图像。这种奇怪的行为有什么原因吗？或者可能是我的理解是错误的？此外，这是完成我的任务的更好方法。感谢您的时间和帮助！

4

1 回答 1

0

IAjaxCallListener像我在这个答案中展示的那样做你想做的 JavaScript 。这样，您可以确保在执行onSubmit()登录之前执行它。

于 2013-11-01T11:16:28.930 回答