html2canvas 保存图像不起作用

Question

我正在使用 html2canvas 0.4.0 渲染屏幕截图，并希望将其保存为我的网络服务器上的图像。

为此，我编写了以下函数：

JavaScript

function screenShot(id) {

    html2canvas(id, {
        proxy: "https://html2canvas.appspot.com/query",
        onrendered: function(canvas) {

            $('body').append(canvas); // This works perfect...

            var img = canvas.toDataURL("image/png");
            var output = img.replace(/^data:image\/(png|jpg);base64,/, "");

            var Parameters = "image=" + output + "&filedir=" + cur_path;
            $.ajax({
                type: "POST",
                url: "inc/saveJPG.php",
                data: Parameters,
                success : function(data)
                {
                    console.log(data);
                }
            }).done(function() {
            });

        }
    });
}    

保存JPG.php

<?php
    $image = $_POST['image'];
    $filedir = $_POST['filedir'];
    $name = time();

    $decoded = base64_decode($image);

    file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);


    echo $name;
?>    

画布渲染后，我可以完美地将其附加到 HTML 正文，但将其保存在我的服务器上会导致文件损坏（？）。

我可以读取 IrvanView 中的尺寸，但图像是透明/空的？ 该文件大约有 2.076 KB 大。所以它并不是真的空。

我也用 JPEG 尝试过此操作，结果导致文件损坏，并且 IrfanView 会显示“虚假标记长度”之类的内容。

屏幕截图的尺寸为650x9633。 POST 方法的数据量是否太大？

Answer 1

如果有人遇到同样的问题，我是这样解决的：

问题取决于这样一个事实，即 URL 中的

+

被大多数服务器解释为编码空间（如

%20

）。所以我需要先对数据进行编码，然后通过

POST

将其发送到我指定的 PHP 函数。

这是我的代码：

JavaScript

function screenShot(id) {

    html2canvas(id, {
        proxy: "https://html2canvas.appspot.com/query",
        onrendered: function(canvas) {

            var img = canvas.toDataURL("image/png");
            var output = encodeURIComponent(img);

            var Parameters = "image=" + output + "&filedir=" + cur_path;
            $.ajax({
                type: "POST",
                url: "inc/savePNG.php",
                data: Parameters,
                success : function(data)
                {
                    console.log("screenshot done");
                }
            }).done(function() {
                //$('body').html(data);
            });

        }
    });
}    

保存PNG.php

<?php
    $image = $_POST['image'];
    $filedir = $_POST['filedir'];
    $name = time();



    $image = str_replace('data:image/png;base64,', '', $image);
    $decoded = base64_decode($image);

    file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);


   echo $image;
?>    

干杯！

Answer 2

通过简单的分期付款在迪拜拥有现成的房产！我们，您的专属 Dhttps://gondalgroupofmarketing.com/own-a-ready-property-in-dubai-with-easy-installments/ubai 房地产专家，已经挖掘出稀有宝石：