Oubli d'éléments avec html2canvas
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:
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:
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:
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.
