Screenshot bij laden pagina

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Screenshot bij laden pagina

      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?

      Source Code

      1. <script type="text/javascript">
      2. $(document).ready(function(){
      3. /*BEGIN DOWNLOAD HTML CONTENT AS IMAGE*/
      4. if($("#image-canvas").length>0) {
      5. $(".save-image").on('click', function() {
      6. $("#image-canvas").height($($(this).attr('data-print-area')).height());
      7. $("#image-canvas").width($($(this).attr('data-print-area')).width());
      8. $($(this).attr('data-print-area')).html2canvas({
      9. onrendered: function (canvas) {
      10. var formdata = {
      11. image_code:canvas.toDataURL("image/png")
      12. };
      13. //console.log(formdata);
      14. $.post("screenshot/saveimage.php", formdata, function(msg) {
      15. console.log(msg);
      16. window.location.href=msg;
      17. });
      18. }
      19. });
      20. });
      21. }
      22. /*END DOWNLOAD HTML CONTENT AS IMAGE*/
      23. });
      24. </script>
      Display All
    • 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 Source Code

      1. <script type="text/javascript">
      2. //<![CDATA[
      3. function saveImage() {
      4. // moved if statement to function
      5. if ($("#image-canvas").length > 0) {
      6. $("#image-canvas").height($($(this).attr('data-print-area')).height());
      7. $("#image-canvas").width($($(this).attr('data-print-area')).width());
      8. $($(this).attr('data-print-area')).html2canvas({
      9. onrendered: function (canvas) {
      10. var formdata = {
      11. image_code:canvas.toDataURL('image/png')
      12. };
      13. // console.log(formdata);
      14. $.post('screenshot/saveimage.php', formdata, function(msg) {
      15. console.log(msg);
      16. window.location.href = msg;
      17. });
      18. }
      19. });
      20. } else {
      21. // @todo maybe some feedback here like "can't save image"?
      22. }
      23. } // function saveImage
      24. $(document).ready(function() {
      25. // save image on load
      26. saveImage();
      27. // save image on click
      28. $(".save-image").on('click', function() {
      29. saveImage();
      30. });
      31. });
      32. //]]>
      33. </script>
      Display All
      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.