Screenshot maken bij laden pagina

Door Enrique Gervaso op 12-01-2017 15:06 gewijzigd op 12-01-2017 18:57

2.124 views

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?


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

Enrique Gervaso

12-01-2017 18:57

done

Frank Nietbelangrijk

12-01-2017 20:02 gewijzigd op 12-01-2017 20:03

~~Als je regel 5 en regel 20 disabled werkt het misschien al.~~

[size=xsmall]Toevoeging op 12/01/2017 20:18:46:[/size]

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:


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

Thomas van den Heuvel

13-01-2017 01:27 gewijzigd op 13-01-2017 01:36

@mods thanks voor het op voorhand vernielen van mijn antwoord. Deze bleek toch relevant? Gelieve deze te herstellen.

Reageren

Inloggen om te reageren