[英]how to show html2canvas 'canvas' in new extJS dialog/panel?
I'm working with html2canvas
, getting canvas value here: 我正在使用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
});
},
How can I present it in some window, dialog or panel of extjs? 如何在extjs的某些窗口,对话框或面板中显示它? Are there some possibilities to change a size of screenshot
? 是否可以更改screenshot
的大小?
I want something like that! 我想要这样的东西! it wrong by me... 我错了...
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();
},
Here is quick example of how I did it. 这是我如何做到的简单示例 。
I basically converted it to a data url and set the image size. 我基本上将其转换为数据URL并设置图像大小。
The canvas part: 画布部分:
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);
}
});
}
}]
UPDATE UPDATE
Here is a new fiddle 这是一个新的小提琴
You could simplify your function to: 您可以将功能简化为:
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();
}
});
}
I resized the image and set it to height=200
you can set a height/width to your preference like you can do for every image. 我调整了图像的大小并将其设置为height=200
,可以像对每张图像一样设置高度/宽度。 Also for the fiddle I set the window to 500*400 else I couldn't see the whole window. 另外,对于小提琴,我将窗口设置为500 * 400,否则我看不到整个窗口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.