Question

我已从数据库中提取数据以创建HTML表，希望将其另存为服务器上的PNG。

当我使用PHP将PNG保存到服务器时，它为空。

我已经创建了静态代码（即不是来自数据库）来说明我的示例。

如果我手动右键单击该图像，然后另存为，则该图像将正确保存，只有当我尝试使其自动化时，该图像才是空白的。我在Chrome和Firefox中都尝试过，但结果相同。

如果有人可以帮助我纠正我做错的事情，我将不胜感激。谢谢。

我正在使用：

PHP 7.3.4
jQuery 3.4.1
Chrome 76.0.3809.100
Firefox 68.01

index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="invoicetable">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
        body        {font-family: courier new; font-size: 13px; }
        td      {padding: 2px 5px 2px 5px; }
        .headerTD   {font-weight: bold; }
        .w60        {width: 60px; }
        .w80        {width: 80px; }
        .w100       {width: 100px; }
        .w120       {width: 120px; }
        .w160       {width: 160px; }
            </style>

<table class='' border='01' style='border-collapse: collapse; font-size: 14px; font-family: trebuchet ms; '><tr><td class='headerTD w100'>Date</td><td class='headerTD w60'>Type</td><td class='headerTD w160'>Detail</td><td class='headerTD w120'>Username</td><td class='headerTD w100'>Line</td><td class='headerTD w100'>Start Date</td><td class='headerTD w100'>End Date</td><td class='headerTD w80'>Subtotal</td></tr><tr><td>23/07/2019</td><td>Credit</td><td>Business Fibre 1</td><td>abc@def.com</td><td>011122223333</td><td>23/07/2019</td><td>21/08/2019</td><td>&pound; <div style='float: right'>-7.74</div></td></tr><tr><td>04/08/2019</td><td>Charge</td><td>Business Fibre 1</td><td>ghi@jkl.com</td><td>01234567890</td><td>04/08/2019</td><td>03/09/2019</td><td>&pound; <div style='float: right'>22.50</div></td></tr><tr><td>04/08/2019</td><td>Charge</td><td>Line Rental</td><td></td><td>01234567890</td><td>04/08/2019</td><td>03/09/2019</td><td>&pound; <div style='float: right'>15.66</div></td></tr><tr><td>04/08/2019</td><td>Charge</td><td>Line Rental</td><td></td><td>01234567890</td><td>04/07/2019</td><td>03/08/2019</td><td>&pound; <div style='float: right'>0.00</div></td></tr><tr><td colspan='7'></td><td>&pound; <div style='float: right'>30.42</div></td></tr></table>

        </div>
    </div>
    <br>
    <br>

    <canvas id="canvas" width="930" height="150"></canvas>

    <script>
        $(function() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var imgW = 930;
            var imgH = 150;
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, imgW, imgH);

            var data = "<svg xmlns='http://www.w3.org/2000/svg' width='" + imgW + "' height='" + imgH + "'>" + "<foreignObject width='100%' height='100%'>" + $("#invoicetable").html() + "</foreignObject>" + "</svg>";
            var DOMURL = self.URL || self.webkitURL || self;
            var img = new Image();
            var svg = new Blob([data], {
                type: "image/svg+xml;charset=utf-8"
            });
            var url = DOMURL.createObjectURL(svg);
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
                DOMURL.revokeObjectURL(url);
            };
            img.src = url;

            var canvas = document.getElementById("canvas");
            var pngData = canvas.toDataURL("image/png");
            $.post("savepng.php", {
                pngData: pngData
            }, function(data) {});

        });
    </script>
</body>

</html>

savepng.php

<?php
$aaa = explode(",", $_POST['pngData']);
file_put_contents("invoicedata.png", base64_decode($aaa[1]));
?>

这是预期的图像输出：

Answer 1

您的代码有三个问题：

您正在尝试保存图像，甚至没有将SVG图像绘制到画布上。
将图像保存在onload回调中。
似乎您从this问题中获取了代码而未解决问题，因此，在调用toDataURL时，您会收到有关污点画布的错误。
如果使用上一个问题中的修复程序，则英镑符号似乎存在问题。这似乎是编码问题，解决方法是here。

要解决这些问题，请使用以下代码：

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);

    var canvas = document.getElementById("canvas");
    var pngData = canvas.toDataURL("image/png");
    $.post("savepng.php", {
        pngData: pngData
    }, function(data) {});
};
function buildSvgImageUrl(svg) {
    var b64 = window.btoa(unescape(encodeURIComponent(svg)));
    return "data:image/svg+xml;base64," + b64;
}
img.src = buildSvgImageUrl(data);

将画布图像保存到服务器

1 个答案: