Oubli d'éléments avec html2canvas

**Dev758** · 19/08/2019, 13h33

Bonjour. J'ai crée une page où on doit "check" des images qui s'enregistrent avec le localStorage, merci encore à NoSmocking pour son aide. Pour continuer sur mon idée, j'ai voulu installer une fonction où l'on pourrait "screen" la page entière puis sauvegarder l'image. J'ai réussi à faire la partie qui screen mais le problème, c'est que sur le screen, les images non cochées le sont et donc, elles sont toutes cochées. Je demande votre aide afin de trouver une solution pour que le screen montre la page dans l'état où elle est lorsqu'on appuie sur le bouton, c'est-à-dire avec les images qui sont cochées et celles qui le sont pas sans que ça change. Voici mon code :

Partie :

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
<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="styles.css">
        <link href="bootstrap.css" rel="stylesheet">
        <script
                src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
                crossorigin="anonymous"></script>
        <script src="script.js"></script>
        <script src="html2canvas.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <meta charset="utf-8" />
    </head>
 
    <body class="checklist">
        <section class="char-group">
        <div class="characters">
                <span class="disabled pictures" id="f0001"><img src="img/f0001.png"></span>
                <span class="disabled pictures" id="f0002"><img src="img/f0002.png"></span>
                <span class="disabled pictures" id="f0003"><img src="img/f0003.png"></span>
        </div>
        <button id="screenshot">Partager</button>
        <div id="show-img">
        </div>

Partie :

Code JavaScript :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
function updateStorage(key, value, save) {
  if (save) {
    localStorage.setItem(key, value);
  }
  else {
    localStorage.removeItem(key);
  }
}
 
function readStorage(key) {
  return localStorage.getItem(key);
}
 
function readAllStorage() {
  const nbItem = localStorage.length;
  const store = [];
  let i;
  let storeKey;
  for (i = 0; i < nbItem; i += 1) {
    storeKey = localStorage.key(i);
    store.push({
      "key" : storeKey,
      "value": readStorage(storeKey)
    });
  }
  // retourne un Arrray d'Object
  return store;
}
 
function updatePage() {
  // lecture du storage
  const store = readAllStorage();
  // restaure la classe selected
  $.each(store, function(index, elem) {
    $("#" + elem.key).addClass("selected");
  });
}
 
function resetPage() {
  // lecture du storage
  const store = readAllStorage();
  // supprime la classe selected
  $.each(store, function(index, elem) {
    $("#" + elem.key).removeClass("selected");
  });
  // vide le localStorage
  localStorage.clear();
}
 
jQuery(document).ready(function($) {
  // restaure état précédent
  updatePage();
 
  // Attention ne pas cibler uniquement la classe selected
  $(".characters span").on("click", function() {
    // objet jQuery en cours
    const $obj = $(this);
    // on bascule la classe selected
    $obj.toggleClass("selected");
    // si classe selected présente c'est que l'on sauvegarde
    const save = $obj.hasClass("selected");
    // on sauve/supprime la key
    updateStorage($obj.attr("id"), $obj.find("img").attr("src"), save);
  });
 
  // bouton annulation éventuel
  $("#clearStore").on("click", function() {
    resetPage();
  });
});
 
document.getElementById('screenshot').addEventListener('click',
  function(ev) {
html2canvas(document.body, {
  allowTaint: true, 
  onrendered: function(canvas) {
    document.getElementById('show-img').appendChild(canvas);
  }
})});

Partie :

Code CSS :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
body {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
}
.checklist {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.char-group {
    max-width: 280px;
}
.char-big-group {
    max-width: 560px;
}
.characters {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.characters span {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
}
.characters span img {
    width: 100%;
    height: 100%;
}
.characters::-moz-selection,
.characters span::-moz-selection,
.characters img::-moz-selection {
    background: none;
}
.characters::selection,
.characters span::selection,
.characters img::selection {
    background: none;
}
.characters span:not(.selected) img {
    -webkit-filter: grayscale(60%) brightness(60%);
    filter: grayscale(60%) brightness(60%);
}
 
button {
    background: #fff;
    box-shadow: 0 2px #dedede;
    border: solid 1px #dedede;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 4px 8px;
}
 
.dropdown {
  position: relative;
  display: inline-block;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
 
.dropdown:hover .dropdown-content {
  display: block;
}
 
div#show-img {
  width:400px;
  height:300px;
  border-style: solid;
  border-width: 2px;
}
 
canvas {
    max-width: 100%;
    max-height: 100%;
}

Merci d'avance pour votre aide.

**Loralina** · 20/08/2019, 11h33

Bonjour,
Tout ne se résume-t-il pas à dire que le filtre css n'est pas pris en compte par html2canvas ?
Si oui, alors si je tape "html2canvas filter" sur un moteur de recherche, le premier résultat donne ceci :
https://github.com/niklasvh/html2canvas/issues/1127

Le dernier message pointe sur une solution dont j'ai repris l'idée dans le test suivant :

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
<style>
.selected
        {
        filter:grayscale(60%) brightness(60%);
        }
</style>
<script src="html2canvas.js"></script>
<img class="selected" src="image.png">
<div id="show-img"></div>
<script>
document.getElementsByTagName("img")[0].onload=function()
        {
        var cvs;
        var ctx;
        var srcImag;
 
        cvs=document.createElement("canvas");
        cvs.width=this.width;
        cvs.height=this.height;
        ctx=cvs.getContext("2d");
        ctx.filter=getComputedStyle(this).filter;
        ctx.drawImage(this,0,0,cvs.width,cvs.height);
        this.onload=function()
                {
                var img;
 
                this.onload=null;
                img=this;
                html2canvas(document.body,
                        {
                        allowTaint:true,
                        onrendered:function(cvs)
                                {
                                document.getElementById('show-img').appendChild(cvs);
                                img.src=srcImag;
                                img.classList.toggle("selected");
                                }
                        });
                };
        srcImag=this.src;
        this.src=cvs.toDataURL();
        this.classList.toggle("selected");
        };
</script>

Ce script fait intervenir CanvasRenderingContext2D.filter, supporté par peu de navigateurs.

Remarque : onrendered ne serait plus d'actualité, voir ici. Il serait sans doute préférable d'utiliser la dernière version de html2canvas.

Oubli d'éléments avec html2canvas

JavaScript

Discussions similaires

Partager

Partager