0

私は学校のためのプロジェクトをやっています。プロジェクトのテーマはTシャツのデザインです。私はjsfとprimefacesを使用しています。divでデザインを行い、divのコンテンツを画像ファイルとして保存したいと思いました。これはhtml5キャンバスで行われます。デザインはbase64として保存されます。私は問題があります。非表示の（dataURL、base64）変数をhtml5からxxx.xhtmlに送信したいと思います。非表示にはbase64データが含まれます。どのようにできるのか？

私は次の側を行います。しかし、それは機能しません。私は何を間違えますか？

my-jquery.js：

    $(document).ready(
    function() {
        $("#sendToServer").click(
                function() {
                    var canvas = document.getElementById("design");
                    var dataUrl = canvas.toDataURL("image/png;base64");

                    var hidden = document.getElementById("dataURL");
                    hidden.value = dataURL;
                }); 
});

design.html：

 <body>
<canvas id="design" width="320" height="260"></canvas>
<form id="sendForm" method="post" action="/Tshirt/demo.xhtml">
    <input type="hidden" id="dataURL"/> 
    <input type="submit"  id="sendToServer" value="Send To Server">
</form>
 </body>

xxx.xhtml：

<h:form>
       <h:inputHidden id="dataURL" value="#{imageBean.dataURL}" />
       <h:commandButton value="Submit" action="#{imageBean.submit}"/>
     </h:form>
4

1 に答える 1

1

JSF は Web サーバーで実行され、Web ブラウザーに送信される HTML を生成します。JS は Web ブラウザーで実行され、HTML DOM ツリーにのみアクセスできます。JSF ソース コードについては何も知りません。

JSF Web アプリケーションの JS コードを記述していて、JSF が正確に生成する HTML コードを頭のてっぺんから見分けることができない場合は、Web ブラウザで JSF ページを開き、右クリックして[ソースを表示]を実行する必要があります。このようなものが表示されます

<form id="j_idt42" ...>
    <input type="hidden" id="j_idt42:dataURL" ... />

document.getElementById("dataURL")それはあなたに何も与えなかった理由を説明しています。ブラウザーの webdeveloper ツールセット (Chrome/IE9/Firebug で F12 を押す) の JS コンソールに細心の注意を払っている場合は、それに気付いているはずです。

基本的にはdocument.getElementById("j_idt42:dataURL")代わりに行う必要がありますが、JSFNamingContainerコンポーネント ( など<h:form>) に固定 ID を与える必要があります。これにより、JSF が ID を自動生成せず、コンポーネントを追加/削除するたびにスクリプトを変更する必要がなくなります。これにより、自動生成された ID が変更されます。例えば

<h:form id="form">
    <h:inputHidden id="dataURL" ... />

これにより生成されます

<form id="form" ...>
    <input type="hidden" id="form:dataURL" ... />

そして、あなたはそれを手に入れることができるでしょう

var hidden = document.getElementById("form:dataURL");
于 2012-12-23T20:45:34.943 に答える