comment afficher html2canvas 'canvas' dans un nouveau dialogue/panneau extJS?

Question

Je travaille avec html2canvas, obtenir la valeur de la toile ici:

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

Comment puis-je présenter dans une fenêtre, dialogue ou panneau de ExtJS? Y at-il des possibilités de changer une taille de screenshot?

Je veux quelque chose comme ça! il tort par moi ...

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

Voici comment rapide je l'ai fait example.

Je me suis converti essentiellement à une URL de données et définir la taille de l'image.

La partie de la toile:

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

MISE À JOUR

Voici un new fiddle

Vous pouvez vous simplifier la fonction:

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

Je redimensionné l'image et mis au height=200 vous pouvez définir une hauteur/largeur à votre préférence comme vous pouvez le faire pour chaque image. Aussi pour le violon j'ai mis la fenêtre à 500 * 400 sinon je n'ai pas pu voir toute la fenêtre.