<p>html2canvas ne capture pas tout l'écran. (Gridster 2)</p>
salut
J'utilise html2canvas, ma page a des widgets de grille et chaque widget a un rapport. lorsque j'essaie de préparer le canevas, je ne suis pas en mesure de capturer tous les éléments de la page, même pas celui qui est entièrement dans la zone visible.
print(element: Element, renderer: Renderer2, includeSvgs = true) {
const height = element.clientHeight;
const width = element.clientWidth;
if (includeSvgs) {
this.convertSvgElems(element, renderer);
}
html2canvas(element).then((canvas) => {
let html = '<html><head><title></title></head>';
html += '<body style="width:"' + width + '" ;height:"' + height + '" padding: 0; margin: 0;"';
html += ' onload="window.focus(); window.print(); window.close()">';
html += '<img crossorigin="anonymous" allowTaint = true useCORS=true src="' + canvas.toDataURL() + '" /></body></html>';
const printWindow = window.open('', 'to_print', 'height=700,width=800');
printWindow.document.open();
printWindow.document.write(html);
if (includeSvgs) {
this.deleteCanvasElems(element, renderer);
}
printWindow.document.close();
});
}
deepender87
👍1
Tous les 4 commentaires
Un problème similaire a été mentionné
ici
deepender87
le 12 déc. 2018
Mise à jour : si je lance le même code via la console du navigateur, dans ce cas, cela fonctionne parfaitement. veuillez vérifier les journaux mentionnés ci-dessous pour les deux :
Par console :
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
jspdf.min.js:5422 495ms html2canvas: Document cloned
jspdf.min.js:5422 497ms html2canvas: Initialized CanvasRenderer with size 1366 x 622
jspdf.min.js:5422 497ms html2canvas: Starting NodeParser
jspdf.min.js:5422 635ms html2canvas: Fetched nodes, total: 2104
jspdf.min.js:5422 636ms html2canvas: Calculate overflow clips
jspdf.min.js:5422 1030ms html2canvas: Start fetching images
jspdf.min.js:5422 1034ms html2canvas: Added image #1 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1037ms html2canvas: Added image #2 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1040ms html2canvas: Added image #3 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1040ms html2canvas: Added image #4 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1042ms html2canvas: Added image #5 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1053ms html2canvas: Finished searching images
jspdf.min.js:5422 1063ms html2canvas: Succesfully loaded image #5 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1065ms html2canvas: Succesfully loaded image #4 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1067ms html2canvas: Succesfully loaded image #3 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1068ms html2canvas: Succesfully loaded image #2 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1069ms html2canvas: Succesfully loaded image #1 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1071ms html2canvas: Images loaded, starting parsing
jspdf.min.js:5422 1072ms html2canvas: Creating stacking contexts
jspdf.min.js:5422 1110ms html2canvas: Sorting stacking contexts
jspdf.min.js:5422 1138ms html2canvas: Render queue created with 3026 items
jspdf.min.js:5422 3316ms html2canvas: Finished rendering
jspdf.min.js:5422 3328ms html2canvas: Cropping canvas at: left: 0 top: 61 width: 1366 height: 561
jspdf.min.js:5422 3340ms html2canvas: Resulting crop with width 1366 and height 561 with x 0 and y 61
jspdf.min.js:5422 3388ms html2canvas: Cleaned up container
Par code :
0ms html2canvas: html2canvas $npm_package_version
Logger.js:36 1028ms html2canvas: Document cloned, using computed rendering
Logger.js:36 1028ms html2canvas: Starting node parsing
Logger.js:36 1096ms html2canvas: Added image data:image/svg+xml,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20height%3D%2224px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22di
Logger.js:36 1359ms html2canvas: Finished parsing node tree
Logger.js:36 1496ms html2canvas: Finished loading 11 images (11) [canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, img]
Logger.js:36 1497ms html2canvas: Starting renderer
Logger.js:36 1498ms html2canvas: Canvas renderer initialized (1366x561 at 0,61) with scale 1
Logger.js:36 1599ms html2canvas: Render completed
J'ai également joint les images pour les deux cas:
Veuillez mettre à jour.
Merci
deepender87
le 13 déc. 2018
J'ai résolu le problème en supprimant la transition.
J'ai ajouté la règle css suivante sur la portée globale :
.gridster-item {
transition: unset !important;
}
appick
le 7 mars 2019
🚀2
👍2
Sur les projets angulaires lorsque gridster est une balise. Ajouter le suivi au scss global
gridster-item {
transition: unset !important;
}
shashikantj
le 29 mai 2020
Cette page vous a été utile?
0 / 5 - 0 notes
Questions connexes
diego-rey
·
3Commentaires
Loki180
·
4Commentaires
yasergh
·
5Commentaires
rrutkows
·
4Commentaires
tjchambers32
·
3Commentaires
Commentaire le plus utile
J'ai résolu le problème en supprimant la transition.
J'ai ajouté la règle css suivante sur la portée globale :