Как показать html2canvas 'canvas' в новом диалоге/панели extJS?

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); 
       } 
      }); 
     } 
    }] 

UPDATE

Вот 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, иначе я не мог видеть все окно.