私の要件は、「送信」ボタンをクリックすることです -
- HTML ページの "< li >" 要素をループし、各 "< li >" 要素から objectURL を取得し、イメージを Canvas にロードして、そこから dataURL を取得します。これらの dataURL を HTML ページの非表示フィールドに格納します。
- 次に、隠しフィールドから dataURL を取得し、それらをバイト配列に変換して、さらに処理を進めます。
私は以下の方法を達成することを目指しました...
1.YUI3 Java スクリプト (submitBehavior_js.js) を使用して最初の部分を実現します。使用 (「クリック」イベント)
submitButton.add(new submitBehavior_js('click',parameters));
2.「送信」ボタンの onSubmit() メソッドをオーバーライドして、2 番目の部分を実現します。
onSubmit(target,form)
{
String[] imgArray = null;
imgdata = hiddenImageData.getValue();
imgArray = imgData.split(',');
.........
}
私はいくつかのスレッドを経験しましたが、実際の経験では、submitBehavior_js.js の前に onSubmit() Java コードが呼び出されるため、隠しフィールドには画像データがありませんでした。
そこで、「クリック」の代わりに「マウスアップ」イベントを使用して Java スクリプトを呼び出そうとしました。これは完全に正常に機能しており、ウィケット コントローラーの onSubmit() の前に Java スクリプトが実行されています。
ただし、私のコードはアダプティブ Web であり、モバイル プラットフォームのブラウザー間で動作するはずです。どうやら「マウスアップ」は私の助けにはなりませんでした。YUI3 のドキュメントで提案されているように、「touchend」イベントと「gesturemoveend」イベントを使用しようとしましたが、どちらの場合も onSubmit() ウィケット 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
Canvas 要素のロード時は Java コードの後に実行されるため、明らかに非表示の画像データ変数には null 値が含まれています....そして、ユーザーがキャプチャ/アップロードした画像を失っています。この奇妙な動作の理由は何ですか? または私の理解が間違っている可能性がありますか？また、私の仕事を達成するためのより良い方法。あなたの時間を感謝し、助けてください!!