Diviser une image avec html2canvas

Version imprimable

Bonjour

J'utilise html2canvas pour récupérer le contenu d'une div et l'afficher dans un modal sous forme d'image:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script src="js/html2canvas.js"></script> <script> $(document).ready(function(){ var element = $("#invoice"); // global variable var getCanvas; // global variable $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { $(".modal-apercu").empty(); $(".modal-apercu").append(canvas); getCanvas = canvas; } }); }); }); </script>
Je voudrais savoir s'il est possible de diviser cette image en plusieurs parties, par exemple si la hauteur du div est de 1800px, chaque 600px correspondra à une image. On aura donc 3 images à afficher. Le but sera donc de diviser le canvas par 3 pour avoir 3 images à la sortie.

Merci

Je te propose d’utiliser 3 autres canevas, et d’y copier différentes portions du canevas source à l’aide de la méthode .drawImage().
Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Couper un canevas en trois</title>
  <style>
 
  body {
    background: #DDD;
  }
 
  canvas {
    border: solid thin #AAA;
    background: white;
  }
 
  </style>
</head>
<body>
 
<p>
  <canvas id="cvs-source" width="400" height="750">Bleh</canvas>
</p>
<p>
  <canvas id="cvs-dest-1" width="400" height="250">Blih</canvas>
  <canvas id="cvs-dest-2" width="400" height="250">Blah</canvas>
  <canvas id="cvs-dest-3" width="400" height="250">Bluh</canvas>
</p>
 
<script> "use strict";
 
const $source = document.getElementById("cvs-source");
const $dest1 = document.getElementById("cvs-dest-1");
const $dest2 = document.getElementById("cvs-dest-2");
const $dest3 = document.getElementById("cvs-dest-3");
 
// dessin dans le canevas source
const cx = $source.getContext("2d");
cx.fillStyle = "#FC5";
cx.fillRect(10, 10, 200, 300);
cx.fillStyle = "#CF6";
cx.fillRect(100, 225, 200, 300);
cx.fillStyle = "#8CF";
cx.fillRect(190, 440, 200, 300);
 
// copie dans les 3 canevas séparés
const cx1 = $dest1.getContext("2d");
cx1.drawImage($source, 0, 0);
const cx2 = $dest2.getContext("2d");
cx2.drawImage($source, 0, 250, 400, 250, 0, 0, 400, 250);
const cx3 = $dest3.getContext("2d");
cx3.drawImage($source, 0, 500, 400, 250, 0, 0, 400, 250);
 
</script>
</body>
</html>

02/11/2019, 21h35
momjunior

Ok je vois. sauf que je ne peux pas dessiner tout le contenu de ma div avec du javascript. J'aimerais en faite afficher l'aperçu d'une facture avant l'impression. La facture sera générée en fonction des infos renseignées par l'utilisateur. Le problème est que la facture peut tenir sur plusieurs pages. C'est pour ça que je voudrais diviser l'faperçu de la facture en plusieurs parties en fonction de sa taille. Donc est-il judicieux et pratique de dessiner le contenu d'une facture avec du javascript?

Merci

Ok je viens de concocter quelque:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
<div id="invoice">Ma facture....</div>
 
<canvas id="moncanvas"></canvas> 
 
<script>
$(document).ready(function(){
        
var element = $("#invoice"); // global variable
var getCanvas; // global variable
 var mcanvas = document.getElementById("moncanvas");
 
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                
                var data = canvas.toDataURL();
 
       // window.open(data);
                getCanvas = canvas;
                                
                                var ctx = mcanvas.getContext("2d");
                                ctx.drawImage(data, 330, 71, 104, 124, 21, 20, 87, 104);
             }
         });
    });
 
});
</script>
</body>

Normalement avec window.open(data); j'arrive à ouvrir l'image capturée dans une autre fenêtre, mais avec l'ajout de ceci:

Code:

ctx.drawImage(data, 330, 71, 104, 124, 21, 20, 87, 104);

J'ai le message d'erreur suivant:

Citation:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.

Il ne reconnait apparemment pas data comme image.

04/11/2019, 12h35
Watilin

Citation:

Il ne reconnait apparemment pas data comme image.

En effet, c’est parce que data est une URL, et donc une chaîne. .drawImage() attend comme premier argument un élément <svg>, <img>, <video> ou <canvas>. En l’occurence, je pense que tu peux utiliser direcement la variable canvas fournie par html2canvas.
05/11/2019, 16h54
momjunior

2 pièce(s) jointe(s)
Ok ça marche mais j'ai un problème au niveau de la qualité de l'image.

Lorsque j'affiche l'image avec toDataURL, l'image est nette:

Pièce jointe 515190

Mais j'ai du mal à reproduire la même chose lorsque j'utilise drawImage:

Pièce jointe 515197

Voici les coordonnées que j'utilise:
Code:

1 2 var ctx = mcanvas.getContext("2d"); ctx.drawImage(getCanvas, 0, 0, 798, 1284, 0, 0, 114, 184);
En fait la div source a une largeur de 798 et une hauteur de 1284. Donc pour avoir la même taille semblable au 1er cas, j'ai divisé le height et width par 7. Mais ça reste flou.
05/11/2019, 18h24
Watilin
C’est peut-être à cause de la manière dont tu donnes leurs dimensions à tes canevas. Un canevas a des dimensions intrinsèques (nombre de pixels de côté) représentés par ses attributs width="…" et height="…". Mais comme tout élément HTML, il a aussi des dimensions CSS qui peuvent être définies via sa propriété .style. Le problème est que les dimensions CSS ne correspondent pas forcément au nombre de pixels, et au besoin, le moteur CSS étire ou rétrécit les pixels. C’est probablement ça qui produit l’effet flou que tu observes.

Pour résumer avec un exemple, si tu as un canevas déclaré comme ceci :

Code:

<canvas width="400" height="300"></canvas

Mais un CSS qui lui donne des dimensions plus grandes :
Code:

1 2 3 4 canvas { width: 800px; height: 600px; }
Il y aura un étirement, et donc du flou.

Dans ton cas, le canevas source est produit par du code tiers, et tu dois utiliser JavaScript pour connaître ses dimensions intrinsèques.
Code:

1 2 3 onrendered: function (canvas) { console.log("canvas width: ", canvas.width); console.log("canvas height: ", canvas.height);
Attention à ne pas confondre canvas.width qui est la largeur intrinsèque, et canvas.style.width qui est la largeur CSS.

On peut également modifier les dimensions intrinsèques d’un canevas via JavaScript. Ainsi, tu peux te servir des dimensions du canevas source pour calculer les dimensions des canevas cibles.
Code:

1 2 mcanvas.width = canvas.width; mcanvas.height = Math.floor(canvas.height / 3);
Si tu fais ça avant d’appeler .drawImage(), l’image devrait être nette.
06/11/2019, 16h54
momjunior

1 pièce(s) jointe(s)

Excellent, ça marche. L'image n'est plus floue.

Le dernier problème (je l'espère) que je rencontre est l'affichage de la 2e image:

Pièce jointe 515485

En effet celle-ci est coupée en bas et à droite, c'est à dire que le barre de défilement verticale s'arrête juste à hauteur de la 1ere image, et la barre horizontale ne s'affiche même pas.

J'ai augmenté la taille du canevas et du div contenant le canevas mais ça ne marche pas.