1

我正在使用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();
    },
4

1 回答 1

1

这是我如何做到的快速示例。

我基本上将其转换为数据 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);
                }
            });
        }
    }]

更新

这是一个新的小提琴

您可以将功能简化为：

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，否则我看不到整个窗口。

于 2013-08-14T14:40:00.683 回答