Modificar el área de captura de un div con html2canvas

tengo un problema que me gustaría que orientaran a resolverlo.

Uso html2canvas para capturar un diagrama de gantt: introducir la descripción de la imagen aquí

La única forma de poder capturar todo el contenido es agregando en mi .css la siguiente linea:

.html2canvas-container { width: 3000px !important; } 

Pero los diagramas varían de tamaños entonces debo cambiar constantemente el atributo. He intentado usar javascript para cambiarlo, pero en ninguna parte mando a traer dicha clase así que no puedo modificarlo directamente.

var datos = document.getElementById("item").clientWidth; var titulos = document.getElementById("titulos").clientWidth; var imagen = datos+titulos;     var link = document.createElement('a'); link.style.width = imagen; 

El detalle esta que cuando ejecuto debería modificar el tamaño de la captura, pero en su lugar no cambia nada por que no modifica la clase html2canvas-container. También he intentado con variable.className("clase"); sin éxito alguno por que no puedo traer directamente la clase pues yo no uso en mi código ni la mando a traer en ningún momento.

Añadir páginas dinámicamente con JSPDF y html2canvas

estoy generando pdf’s y necesito que conforme se vaya completando una página se siga escribiendo el pdf.

Actualmente lo que me saca es solamente una página, yo lo que quiero es sacar todo el contenido que está dentro del div informeExport

Para ello les dejo el código de mi componente TS

  @ViewChild('informeExport') informeExport:ElementRef;    generarPDF() {      const div = document.getElementById('informeExport');     const options = {       background: 'white',       scale: 3     };      html2canvas(div, options).then((canvas) => {        var img = canvas.toDataURL("image/PNG");       var doc = new jspdf('p', 'mm', 'a4', 1);       var options = {          pagesplit: true     };        // Add image Canvas to PDF       const bufferX = 5;       const bufferY = 5;       const imgProps = (<any>doc).getImageProperties(img);       const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;       const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;       doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'FAST');        return doc;     }).then((doc) => {       doc.save('prueba.pdf');       });   } 

Generar PDF con html2canvas en angular

estoy intentando generar un PDF con html2canvas pero a la hora de llamar a la función me tirar un error, mi TS es el siguiente:

  @ViewChild('content') content:ElementRef;    generarPDF() {     html2canvas(document.getElementById('content'), {       // Opciones       allowTaint: true,       useCORS: false,       // Calidad del PDF       scale: 1     }).then(function(canvas) {       var img = canvas.toDataURL("image/png");       var doc = new jsPDF();       doc.addImage(img,'PNG',7, 20, 195, 105);       doc.save('postres.pdf');     });   } 

Mi HTML es el siguiente

div.cliente {     border-bottom: 2px dotted;     width: 70%;     float: left; }  div.fecha {     border-bottom: 2px dotted;     width: 28%;     float: right; }  ul.satisfacion {     float: left;     margin-top: 28px; }
  <div #content id="content">     <div class="contenido-pdf">             <div class="cliente">         <span>Cliente: </span>         <div class="campo"></div>       </div>       <div class="fecha">           <span>Fecha: </span>           <div class="campo"></div>         </div>       <ul class="satisfacion">         <li>El servicio es muy satisfactorio</li>         <li>El servicio es satisfactorio</li>         <li>El servico es normal</li>         <li>El servicio no es satisfactorio</li>       </ul>     </div>   </div>   <button mat-raised-button (click)="generarPDF()" id="donwloadpdf">   DESCARGAR CARTA DE CONFORMIDAD </button>

Y el error que me tira es el siguiente

    ERROR Error: "Uncaught (in promise): Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData  e.convertStringToImageData 

Cuando voy a hacer click en generarpdf no me lo genera ni hace nada, simplemente me tira ese error por consola, ya probé a generarlo con jsPDF pero el problema es que no me conserva los estilos

Using html2Canvas API to generate images of custom aspx pages

So I have an html table I’d like to convert to an image and I found a pretty neat API to do exactly this. It’s called html2canvas. I have been able to use it pretty easily using HTML pages in my desktop but as soon as I try to run the exact same script in an aspx page on sharepoint absolutely nothing happens. No message, no error, nothing. I do NOT have access to the server so I am really locked into a server side solution. Here is the code I used (which worked for local html files).

<html> <head>     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head>  <body> <div id="pdfWrapper" class="pdfWrapper" style="background-color:yellow;border:1px solid black;">     <h1 id="capNum" style="color:maroon;background-color:blue;">Test</h1>     <h2 id="title">some info goes here</h2>     <p id="description">Yadda yadda yadda. Yadda yadda yadda. Yadda yadda yadda. Yadda yadda yadda. Yadda yadda yadda. Yadda yadda yadda. Yadda yadda yadda.</p>     <table>         <tr style="background-color:red;"><td>a1</td><td>a2</td><td>a3</td></tr>         <tr style="background-color:blue;"><td>b1</td><td>b2</td><td>b3</td></tr>         <tr style="background-color:green;"><td>c1</td><td>c2</td><td>c3</td></tr>     </table> </div> <a href="javascript:viewAsImage();">View As Image</a> </body>  <script> function viewAsImage() {     html2canvas($  ("#pdfWrapper"),     {         onrendered: function (canvas)         {             var myImage = canvas.toDataURL("image/png");             var tWindow = window.open("");              $  (tWindow.document.body).html("<img id='Image' src=" + myImage + " style='width:100%;'></img>");         }     }); } </script> </html> 

I’ve tried implementations where I don’t open a new page in case Sharepoint was blocking popups or something.. I am not really familiar with asp so it could just be something very simple I’m overlooking. The reason I can’t just use HTML is I am also using CSOM to populate some of the table fields from a Sharepoint list before I create the image.

PLEASE. Any help on this matter would be so appreciated.

problema com html2canvas

boa noite pessoal, meu primeiro post aqui no site é o seguinte, estou desenvolvendo uma pagina para um cliente em que nessa pagina as pessoas que acessarem vão poder montar uma cozinha, é como se fosse um editor de imagem, ai criei a div que vai ser o editor e usei jquery-ui para deixar as imagens dos moveis arrastaveis. dai eu uso o html2canvas e converto a div em imagem, ate ai tudo bem, olhem o codigo:

var convertMeToImg = $  ('#editor')[0];     html2canvas(convertMeToImg).then(function(canvas) {         $  ("#resul").append(canvas);     }); 

funcionou perfeitamente, a foto e tirada e jogada em uma div, e mostra perfeitamente a imagem, com as fotos dos moveis em cima e tudo mais.

mas o meu problema é em questao, que eu não queria apenas exibi-la como imagem, o cliente quer que a imagem seja baixada, dai pesquisando na internet, achei um codigo que faz esse trabalho pra mim, segue o codigo:

ImageSaver = { 

// function to force-download from a data uri as a filename // nb the download=”filename” attribute isn’t yet supported by safari download_data_uri: function(dataURI, fileName) { var tempUrl = ImageSaver.make_url_from_data(dataURI); var link = $ (‘ ‘); $ (“body”).append(link); $ (“#download”).get(0).click(); },

// function to generate a temporary browser index url for a datauri // if a data-uri is larger than 2mb, chrome’s address bar can’t handle it. // fortunately, you can blob it and then use a temporary blob url make_url_from_data: function(dataURI) { var blob = ImageSaver.make_blob(dataURI); var tempUrl = URL.createObjectURL(blob); return tempUrl; },

// function to convert a datauri to a blob // Blobs are temporary data structures that can hold binary data, and make that data accessible through a short url. They can probably do other things too; I have no idea. make_blob: function(dataURI) { // convert base64 to raw binary data held in a string // doesn’t handle URLEncoded DataURIs var byteString; if (dataURI.split(‘,’)[0].indexOf(‘base64’) >= 0) byteString = atob(dataURI.split(‘,’)[1]); else byteString = unescape(dataURI.split(‘,’)[1]); // separate out the mime component var mimeString = dataURI.split(‘,’)[0].split(‘:’)[1].split(‘;’)[0];

// write the bytes of the string to an ArrayBuffer var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) {   ia[i] = byteString.charCodeAt(i); };  // write the ArrayBuffer to a blob, and you're done return new Blob([ab], {   type: mimeString }); 

} }

dai a minha função usando esse codigo ficou assim:

var convertMeToImg = $  ('#editor')[0];     html2canvas(convertMeToImg).then(function(canvas) {         superLongURI = canvas.toDataURL("image/png");         ImageSaver.download_data_uri(superLongURI, "projeto.png");         shortURI = ImageSaver.make_url_from_data(dataURI);     }); 

dai fui testar, pediu pra baixar, quando fui ver a imagem, so tinha o fundo da div #editor, as imagens que eu movimentei em cima nenhuma apareceu, sera que alguem me da uma luz? por favor, desde ja agradeço

Error en la librería html2canvas en VUE

quiero hacer una captura de pantalla en el mapa de google maps. Implemento el código, por defecto, de la librería y me aparece el siguiente error por consola. Uncaught (in promise) Provided element is not within a Document. He intentado implementarle una promesa con .then, pero tampoco me funciona.

Dejo el código aquí abajo

<template>   <div>     <!-- SOURCE -->     <div ref="printMe">       <h1>Print me!</h1>     </div>     <!-- OUTPUT -->     <img :src="output">   </div> <template>  <script> export default {   data() {     return {       output: null     }   },   methods: {     async print() {       const el = this.$  refs.printMe;       // add option type to get the image version       // if not provided the promise will return        // the canvas.       const options = {         type: 'dataURL'       }       this.output = await this.$  html2canvas(el, options);     }   } } </script>  

Gracias por la ayuda. Un saludo