Screenshot maken bij laden pagina
Ik heb nu onderstaande code maar nu moet ik op een button klikken voordat een screenshot wordt gemaakt van een div. Wie weet hoe ik dit kan aanpassen zodat deze wordt gemaakt bij het laden van de pagina?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
$(document).ready(function() {
/*BEGIN DOWNLOAD HTML CONTENT AS IMAGE*/
if ($("#image-canvas").length > 0) {
$(".save-image").on('click', function() {
$("#image-canvas").height($($(this).attr('data-print-area')).height());
$("#image-canvas").width($($(this).attr('data-print-area')).width());
$($(this).attr('data-print-area')).html2canvas({
onrendered: function(canvas) {
var formdata = {
image_code: canvas.toDataURL("image/png")
};
//console.log(formdata);
$.post("screenshot/saveimage.php", formdata, function(msg) {
console.log(msg);
window.location.href = msg;
});
}
});
});
}
/*END DOWNLOAD HTML CONTENT AS IMAGE*/
});
</script>
$(document).ready(function() {
/*BEGIN DOWNLOAD HTML CONTENT AS IMAGE*/
if ($("#image-canvas").length > 0) {
$(".save-image").on('click', function() {
$("#image-canvas").height($($(this).attr('data-print-area')).height());
$("#image-canvas").width($($(this).attr('data-print-area')).width());
$($(this).attr('data-print-area')).html2canvas({
onrendered: function(canvas) {
var formdata = {
image_code: canvas.toDataURL("image/png")
};
//console.log(formdata);
$.post("screenshot/saveimage.php", formdata, function(msg) {
console.log(msg);
window.location.href = msg;
});
}
});
});
}
/*END DOWNLOAD HTML CONTENT AS IMAGE*/
});
</script>
Gewijzigd op 12/01/2017 18:57:27 door Enrique Gervaso
Dit is wss bedoeld om een initiële afbeelding op te slaan ofzo?
** KNIP **
Edit:
Laten we maar eerst afwachten wat de topicstarter wilt, voordat we met e.v.t. illegale praktijken gaan meewerken.
Gewijzigd op 12/01/2017 16:11:33 door - Ariën -
Gewijzigd op 12/01/2017 15:55:35 door - Ariën -
Een initiële afbeelding op je eigen site hoef je niet op te slaan, want daarvan weet je al welke afbeelding dat is.
Gewijzigd op 12/01/2017 15:28:08 door Ozzie PHP
EDIT: Anders moet je op een of andere manier programmatisch een uitzondering maken voor de eerste stap.
Gewijzigd op 12/01/2017 15:41:12 door Thomas van den Heuvel
Ozzie PHP op 12/01/2017 15:27:23:
Een initiële afbeelding op je eigen site hoef je niet op te slaan, want daarvan weet je al welke afbeelding dat is.
De TS wil een afbeelding maken van de inhoud van een div, niet van een eigen afbeelding.
Dat is nu juist het (beveiligings)probleem…
Mijn reactie is een reactie op de opmerking van Thomas.
Het lijkt me persoonlijk handig als Thomas zijn uitleg even verwijdert en dat we afwachten wat de TS te zeggen heeft. Zo lang niet duidelijk is of het hier wellicht om een frauduleuze handeling gaat, ligt de bal mijns inziens bij de TS.
Reden dat ik dit wil doen is omdat ik een template builder aan het maken ben. Als de template klaar is en de HTML is gegenereerd dan wil ik een screenshot van het geheel automatisch opslaan en toevoegen als preview in de gallery.
Geen frauduleuze handelingen of whatever....
Iemand die een voorbeeld kan geven met bovenstaande code hoe ik dit moet doen? Ik krijg de on click functie niet weg en er wordt niets opgeslagen.
Enrique Gervaso op 12/01/2017 18:26:25:
Dat had je natuurlijk kunnen voorkomen door natuurlijk direct uit te leggen wat je bedoeling was. Maar je punt is nu gelukkig duidelijk. Misschien is het wel handig om je code even netjes in te springen, want als ik haakjes onder elkaar zie, dan krijgt dat altijd een beetje de kriebels bij mij ;-).Zo dat zijn een aantal loze kreten zeg...
Gewijzigd op 12/01/2017 18:34:36 door - Ariën -
Toevoeging op 12/01/2017 20:18:46:
die Button .save-image heeft blijkbaar een attribuut 'data-print-area'. De waarde van dit attribuut verwijst blijkbaar naar een ander HTML element. Dit element heeft een bepaalde breedte en hoogte. Die heb je nodig om een screendump te maken. Als je de breedte en hoogte weet dan kun je het bijvoorbeeld zo oplossen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
function saveImage(w, h)
{
$("#image-canvas").height(h);
$("#image-canvas").width(w);
$($(this).attr('data-print-area')).html2canvas({
onrendered: function(canvas) {
var formdata = {
image_code: canvas.toDataURL("image/png");
};
//console.log(formdata);
$.post("screenshot/saveimage.php", formdata, function(msg) {
console.log(msg);
window.location.href = msg;
});
}
});
}
$(document).ready(function() {
if ($("#image-canvas").length > 0) {
saveImage(640, 480); <-- breedte, hoogte
}
});
</script>
function saveImage(w, h)
{
$("#image-canvas").height(h);
$("#image-canvas").width(w);
$($(this).attr('data-print-area')).html2canvas({
onrendered: function(canvas) {
var formdata = {
image_code: canvas.toDataURL("image/png");
};
//console.log(formdata);
$.post("screenshot/saveimage.php", formdata, function(msg) {
console.log(msg);
window.location.href = msg;
});
}
});
}
$(document).ready(function() {
if ($("#image-canvas").length > 0) {
saveImage(640, 480); <-- breedte, hoogte
}
});
</script>
Gewijzigd op 12/01/2017 20:03:12 door Frank Nietbelangrijk
Edit:
Dat kan via PM.
Gewijzigd op 13/01/2017 01:36:08 door - Ariën -