0

我正在使用 JSF 和 Javascript 开发一个 Web 应用程序。我有一个关于如何打开弹出窗口并向其中添加信息的问题。

事实上，我正在使用 html2canvas 来获取 HTML 页面内容的图像。

这是我的 js 的代码：

function openPopupWithScreenshot(){
    html2canvas($('#contentBody'), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            window.open(img);
        }
    });
}

我在 JSF 中的按钮代码：

<h:commandButton value="#{bundle.button_print}" onclick="openPopupWithScreenshot();"/>

该代码完美运行，当我单击按钮时，会出现一个带有我的图像的弹出窗口。但我的问题是我想在弹出窗口中添加更多信息（存储在 Javabean 中）。

从原理上讲，我希望我的弹出窗口显示我的图像和存储在我的 Javabean 中的字符串。我是 javascript 的菜鸟，我不知道该怎么做。

请问你能帮帮我吗？

谢谢你。

编辑 ：

我试过这个：

function ouvrirPopupAvecImprEcran(){
    html2canvas($('#contentBody'), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            var newImg = window.open(img);
            newImg.document.write("<title>TITLE</title>");
            newImg.document.write("<img src='"+ img.src +"'/>");
            newImg.document.write("<p>TEST</p>");
        }
    });
}

我的弹出窗口正确显示，但我的图像没有显示，因为它找不到我的图像来源。我怎么能修改这个？

4

1 回答 1

2

你快到了，试试这个：

function ouvrirPopupAvecImprEcran(){
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png");
            var newImg = window.open();
            newImg.document.write("<title>TITLE</title>");
            newImg.document.write("<img src='"+ img +"'/>");
            newImg.document.write("<p>TEST</p>");
        }
    });
}

您在此处从画布创建的图像var img = canvas.toDataURL("image/png");不是 HTML 元素 img。它是一个带有 data: URL 的字符串，它就像一个编码成字符串的图像。为了更好地理解它，您可以在此处查看 HTMLCanvasElement#toDataURL() 方法http://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

于 2013-10-30T15:27:38.540 回答