Screenshot bij laden pagina

SimoneOnline

Hoi,

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

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

Meer tonen

FangorN

Breng het opslaan van de afbeelding onder in een aparte functie. Roep deze functie aan wanneer je de afbeelding wilt opslaan:
- bij het laden van de pagina (kan direct in het ready() { ... } blok)
- bij het klikken op de save-button

SimoneOnline

Zou je een voorbeeld kunnen maken met bovenstaande? Ik krijg het niet werkende. Weet niet hoe ik de on click weg krijg...

FangorN

Ik ging er min of meer vanuit dat je beide wilt? Automatisch bij het laden van de pagina, op afroep bij het klikken op de save-knop? Dat zou dan zoiets worden?

HTML

<script type="text/javascript">
//<![CDATA[
function saveImage() {
    // moved if statement to function
    if ($("#image-canvas").length > 0) {
        $("#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;
                });
            }
        });
    } else {
        // @todo maybe some feedback here like "can't save image"?
    }
} // function saveImage


$(document).ready(function() {
    // save image on load
    saveImage();


    // save image on click
    $(".save-image").on('click', function() {
        saveImage();
    });
});
//]]>
</script>

Meer tonen

Als je het onclick gedeelte weg wilt hebben haal je gewoon het on click blok weg. Ik geloof dat alle haken goed staan maar je moet maar even kijken.

Overigens als $(document).ready() niet werkt kun je overwegen om $(window).load() te gebruiken om de code pas effectief te maken als alle objecten, frames en afbeeldingen op de pagina zelf zijn geladen zoals hier staat uitgelegd.

ICTscripters

Dé plek voor IT

Dé plek voor IT

[Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

Herkent deze Notion-structuurscan echte problemen?

🚀 WE ZOEKEN TESTERS! 🚀

Luchtvaartsoftware: Hoe technologie de moderne luchtvaart verandert

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

TK: Kraai.eu

Screenshot bij laden pagina

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2