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

Question

我正在使用 html2canvas，在此处获取 Canvas 值:

 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 的某些窗口、对话框或面板中呈现它？是否有可能更改屏幕截图的大小？

我想要这样的东西!是我错了...

 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我是如何做到的。

我基本上将其转换为数据网址并设置图像大小。

Canvas 部分:

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，您可以根据自己的喜好设置高度/宽度，就像为每个图像所做的那样。另外，对于 fiddle ，我将窗口设置为 500*400，否则我看不到整个窗口。