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>

将canvas转换为img并仅打印图像

1 个答案: