畫布元素更改后如何打印畫布元素？

Question

我試圖在網頁上添加“打印內容”按鈕以打印畫布元素，但是畫布內容（鍛煉指標的可視圖）會根據選擇的鍛煉方式（坐凳，下蹲等）而變化。 我可以打印顯示在網頁上的畫布內容（默認設置為“蹲”），但是在更改指標並單擊“應用更改”按鈕后，圖形內容會更改，但是我仍然打印“蹲”內容，不管我做什么。

你能幫我嗎？

這是代碼：

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

您可以像這樣在打印之前將繪圖函數注冊到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
    );
}

這是我的樣本。