我的要求是点击“提交”按钮 -
- 遍历 HTML 页面上的“<li>”元素，从每个“<li>”元素中获取 objectURL，将图像加载到 Canvas 并从中获取 dataURL。将这些 dataURL 存储在 HTML 页面的隐藏字段中。
- 然后从隐藏字段中检索 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 元素的加载，显然隐藏的图像数据变量具有空值....并且我丢失了用户捕获/上传的图像。这种奇怪的行为有什么原因吗？或者可能是我的理解是错误的？此外，这是完成我的任务的更好方法。感谢您的时间和帮助！