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 在 webserver 中运行并生成发送到 webbrowser 的 HTML。JS 在 webbrowser 中运行，只能访问 HTML DOM 树。它对JSF 源代码一无所知。

在为 JSF Web 应用程序编写 JS 代码时，您无法一目了然地知道 JSF 究竟会生成什么 HTML 代码，那么您应该在 webbrowser 中打开 JSF 页面并右键单击并查看源代码。你会看到这样的东西

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

这就解释了为什么document.getElementById("dataURL")没有给你任何东西。如果您密切关注浏览器的 webdeveloper 工具集中的 JS 控制台（在 Chrome/IE9/Firebug 中按 F12），那么您应该已经注意到了。

您基本上需要这样做document.getElementById("j_idt42:dataURL")，但您应该给 JSFNamingContainer组件（例如<h:form>）一个固定 ID，以便 JSF 不会自动生成一个，然后您不需要在每次添加/删除组件时更改脚本视图，导致自动生成的 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 回答