如何在新的 extJS 对话框/面板中显示 html2canvas 'canvas'？

Question

我正在与html2canvas 合作，在这里获取画布值：

 makeScreenshot: function(button)
 {
     debugger;
     //window.location.href = "mai lto:mail@example.org";

     html2canvas(document.body, {
         onrendered: function(canvas) {
             document.body.appendChild(canvas);
         },
         width: 600,
         height: 600
     });
 },

如何在 extjs 的某个窗口、对话框或面板中呈现它？ 是否有可能更改screenshot 的大小？

我想要这样的东西！我错了……

 makeScreenshot: function(button)
    {
        debugger;
        //window.location.href = "mai lto:mail@example.org";

        var screenshotHtml;
         html2canvas(document.body, {
             onrendered: function(canvas) {

                 screenshotHtml = document.body;

            }
        });

        var win = new Ext.Window({
            title: 'Screenshot',
            width: 1024,
            height: 640,
            resizable: true,
            autoScroll: true,
            preventBodyReset: true,
            html: screenshotHtml
        });
        win.show();
    },

Answer 1

这是我如何做到的快速example。

我基本上是把它转换成数据url并设置图片大小。

画布部分：

buttons: [{
        text: 'Login',
        handler: function (button) {
            var win = button.up('window');
            html2canvas(document.body, {
                onrendered: function (canvas) {
                    var c = win.down('form container'),
                        img = new Image();

                    img.height = 100;
                    img.src = canvas.toDataURL("image/png");

                    c.getEl().dom.appendChild(img);
                }
            });
        }
    }]

更新

这是new fiddle

您可以将您的功能简化为：

makeScreenshot: function (button) {
    debugger;
    //window.location.href = "mailto:mail@example.org";

    html2canvas(document.body, {
        onrendered: function (canvas) {
            new Ext.Window({
                title: 'Screenshot',
                width: 500,
                height: 400,
                resizable: true,
                autoScroll: true,
                preventBodyReset: true,
                html: '<img src="' +canvas.toDataURL("image/png") +'" height="200"/>'
            }).show();
        }
    });
}

我调整了图像的大小并将其设置为height=200，您可以根据自己的喜好设置高度/宽度，就像对每张图像一样。另外对于小提琴，我将窗口设置为 500*400 否则我看不到整个窗口。