如何展示html2canvas'画布'在新的extJS对话框/面板中

how to show html2canvas 'canvas' in new extJS dialog/panel?

本文关键字：对话框 extJS html2canvas 何展示 画布      更新时间：2023-09-26

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

下面是我如何做到这一点的快速示例

我基本上将其转换为数据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，否则我看不到整个窗户。

相关文章：