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

Question

找到了在新窗口中打开 html2canvas 并在 window.open 上打开打印对话框的解决方案。但是，打印对话框就像我正在打印网页一样，图像周围有空白。我只想打印生成的图像。

我不确定如何删除空格。我希望有人能引导我朝着正确的方向前进。

这是生成 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;
    ?>

这是 html2canvas 脚本：

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

最后，这是一个旨在在新窗口中重新加载图像并在按钮单击时打开打印对话框的脚本：

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

在大多数情况下，这可以按预期工作，只是生成的图像仍然被空白包围。我希望它只是图像。谁能告诉我我做错了什么？

更新：打印对话框似乎仍在尝试打印整个网页，而不仅仅是图像？如何打开仅包含图像的打印对话框。

例如，如果我右键单击结果页面上的图像并单击在新选项卡中打开，则新选项卡仅显示图像。这就是我要打印的内容。

谢谢，

Answer 1

当您通过调用toDataURL() 将画布转换为图像时，将图像类型之类的参数传递给函数：'image/png' , 'image/jpeg' 等。

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