Wie wird ein Canvas-Element NACH Änderungen des Canvas-Elements gedruckt?

Question

Ich versuche, einer Webseite eine Schaltfläche "Inhalt drucken" hinzuzufügen, um ein Canvas-Element zu drucken, aber der Canvas-Inhalt (ein visuelles Diagramm der Trainingsmetriken) ändert sich je nachdem, welches Workout ausgewählt wurde (Bank, Kniebeugen usw.). Ich kann den Canvas-Inhalt drucken, der auf der Webseite angezeigt wird (standardmäßig "squat"), aber nachdem ich die Metrik geändert und auf "Apply Changes" geklickt habe, ändert sich der Inhalt des Diagramms, aber ich drucke immer noch den "Squat" -Inhalt. egal, was ich tue.

Können Sie helfen? Hier

ist der Code:

<!-- BEGIN PRINT FUNCTION--> 
     <script type="text/javascript"> 
      $(function print_content(){ 

      var canvas=document.getElementById("exerciseChart"); 

      if(document.getElementById('submitButton').clicked == true) { 
       var win=window.open(); 
        win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); 
        win.print(); 
        win.location.reload(); 

        $("#printContent").click(function(){ print_content(); }); 
      }else { 
        var win=window.open(); 
        win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); 
        win.print(); 
        win.location.reload(); 

        $("#printContent").click(function(){ print_content(); }); 
        }); // end $(function(){}); 
       }; 
     </script> 
<h3 align="center" > Resistance Exercise Reports </h3> 
    </section> 
    <!-- This chart.js file is the backbone of the chart visuals. --> 
    <script src='Chart.js/Chart.js'></script> 
    <div id="linechartparent"> 
     <!-- This is the canvas that is edited by chartJsBacked --> 
     <canvas id='exerciseChart' height='250' ></canvas> 
    </div> 
    <!-- This is where the javascript is inserted--> 
    <script type="text/javascript" src="chartJsBackend.js"></script> 
    <form name = "chartParameters" class="chartParameters" id="chartForm"> 
    <?php 
      // If the user is a coach, give them the option to choose which athlete's results they're seeing. 
      if($_SESSION['isCoach'] == true){ 
       echo("<p> <select name='selectedUser'>"); 
      $category = mysqli_query($conn, "SELECT username FROM playerinfo WHERE Active = '0'"); 
      while ($row = $category->fetch_assoc()){ 
       echo "<option value='" . $row['username'] . "'>" . $row['username'] . "</option>"; 
      } 
      } 
      echo("</select>"); 
      ?> 
     <div class="InfoSelect"> 
      <select name='workoutRange'> 
       <option value="1">1 week</option> 
       <option value="4">1 month</option> 
       <option value="12">3 months</option> 
       <option value="24">6 months</option> 
       <option value="52">1 year</option> 
       <option value="4096" selected="selected">All time</option> 
      </select> 
      <select name='exercise'> 
       <option value="squat">Squat</option> 
       <option value="deadlift">Dead Lift</option> 
       <option value="powerpull">Power Pull</option> 
       <option value="bench">Bench</option> 
      </select> 

      <!-- When this button is pressed, reload the canvas--> 
      <button type="button" id="submitButton" name="submitButton" >Apply Change</button> 
      <button id="printContent">Print Content</button> 
     </div> 
    </form> 

Answer 1

können Sie sich registrieren Zeichnungsfunktion zu window.onbeforeprint und window.matchMedia("print") sie vor dem Druck genannt werden, wie diese.

function ready(){ 
    //your own canvas drawing code 
} 
window.onbeforeprint = ready; 
if(window.matchMedia){ 
    window.matchMedia("print").addListener(
     mql => mql.matches ? ready() : null 
    ); 
} 

This ist meine Probe.