将画布转换为img并仅打印图像

Question

Found solutions for opening html2canvas in new window and opening the print dialogue on window.open. However, the print dialogue presents as if I am printing a webpage, with whitespace around the image. I want to print nothing but the generated image.

I'm not sure how to remove the whitespace. I'm hoping someone can steer me in the right direction.

This is the code that generates the HTML:

  <?php
$servername = "localhost";
$username = "xxxxxx";
$password = "xxxxx";
$dbname = "xxxxx";

$id = $_GET["id"];

    try {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("SELECT Name, Number, PartA, PartB FROM Medicard WHERE `Medicard`.`id` = ?"); 
        $stmt->execute(array($id));

        // set the resulting array to associative
        $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);

        foreach ($stmt->fetchAll() as $row) {
            echo "<div id='html-content-holder' style='width: 3.375in; height: 2.125in; padding: 0;' >";
            echo '<img style="width: 324px; height: 204px; margin-left: -2.5%; margin-top: -2%;" src="images/high-rez-medicare-card.jpg" alt="medicare card"/>';
            echo "<div style='position: relative; width: 3.375in; height; 2.13in; margin-top: -2.125in;'></div>";
            echo "<div style='width: 100%; padding: 73px 0 0 8px;' >" . $row['Name'] . "</div>";
            echo "<div style='width: 100%; margin: 30px auto auto 8px;' >" . $row['Number'] . "</div>";
            echo "<div style='width: 100%; margin: 11px auto auto 181px;' >" . $row['PartA'] . "</div>";
            echo "<div style='width: 100%; margin: 2px auto auto 181px;' >" . $row['PartB'] . "</div>";
            echo "</div>";
            echo "</div>";
            echo "<button id='printCard' onclick='print_card()'>Print Image</button>";

        } 

    }
    catch(PDOException $e) {
        echo "Error: " . $e->getMessage();
    }
    $conn = null;
    ?>

This is the html2canvas script:

    <script>
    $(window).load(function () {

var scaleBy = 3.12;
var w = 324;
var h = 204;
var div = document.querySelector('#html-content-holder');
var canvas = document.createElement('canvas');
canvas.id = "canvas";
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);

html2canvas(div, {
    canvas:canvas,
    onrendered: function (canvas) {
        theCanvas = canvas;
        document.body.appendChild(canvas);

        Canvas2Image.saveAsPNG(canvas);
        $(body).append(canvas);
    }
});
    });

    </script>

And finally this is the script that is designed to reload the image in a new window and open the print dialogue on button click:

<script>
function print_card(){
    var canvas=document.getElementById("canvas");
    var win=window.open();
    win.document.write("<img src='"+canvas.toDataURL('image/png')+"' width:='324' height='204'/>");
    win.print();
    win.location.reload();
}

$("#printCard").click(function(){ print_card(); });
    </script>

For the most part this works as expected except that the resulting image is still surrounded by whitespace. I want it to be nothing but the image. Can anyone tell me what I am doing wrong?

UPDATE: It appears as if the print dialogue is still trying to print the entire web page as opposed to just the image? How can I open a print dialogue that only contains the image.

For instance, if I right click the image on the resulting page and click open in new tab, the new tab shows only the image. That is what I want to print.

Thanks,

Answer 1

When you convert the canvas to image with calling toDataURL(), pass the image type like argument into the function: 'image/png' , 'image/jpeg' , etc.

<script>
function print_card(){
    var canvas=document.getElementById("canvas");
    var win=window.open();
    win.document.write("<img src='"+canvas.toDataURL('image/jpeg')+"' width:='324' height='204'/>");
    win.print();
    win.location.reload();
}

$("#printCard").click(function(){ print_card(); });
    </script>