Diviser une image avec html2canvas

**momjunior** · 31/10/2019, 14h26

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Watilin** · 01/11/2019, 13h30

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**momjunior** · 02/11/2019, 21h35

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

**momjunior** · 02/11/2019, 23h23

Ok je viens de concocter quelque:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'ai le message d'erreur suivant:

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.

**Watilin** · 04/11/2019, 12h35

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.

**momjunior** · 05/11/2019, 16h54

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:

Nom : alex1.PNG
Affichages : 520
Taille : 236,2 Ko

Nom : alex1.PNG
Affichages : 520
Taille : 236,2 Ko

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

Nom : alex2.PNG
Affichages : 511
Taille : 88,3 Ko

Voici les coordonnées que j'utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Watilin** · 05/11/2019, 18h24

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais un CSS qui lui donne des dimensions plus grandes :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**momjunior** · 06/11/2019, 16h54

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:

Nom : alex3.PNG
Affichages : 505
Taille : 77,3 Ko

Nom : alex3.PNG
Affichages : 505
Taille : 77,3 Ko

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.

Diviser une image avec html2canvas

jQuery

Discussions similaires

Partager

Partager