如何在canvas元素更改後打印canvas元素？

我正在嘗試向網頁添加一個「打印內容」按鈕來打印畫布元素，但畫布內容（鍛鍊指標的可視圖形）根據選擇的鍛鍊（長凳，下蹲等）而變化。我可以打印顯示在網頁上的畫布內容（默認情況下設置爲「深蹲」），但在更改指標並點擊「應用更改」按鈕後，圖表內容會發生變化，但我仍然會打印「下蹲」內容，不管我做什麼。如何在canvas元素更改後打印canvas元素？

你能幫忙嗎？

下面是代碼：

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

來源

2017-02-11 Luke

可以註冊繪圖功能，以window.onbeforeprint和window.matchMedia("print")他們被打印前調用，像這樣。

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

This是我的例子。

來源

2017-02-11 22:25:04 defghi1977

如何在canvas元素更改後打印canvas元素？

回答

相關問題