php html2canvas保存图像不起作用

f5emj3cl 于 2024-01-05 发布在 PHP

关注(0)|答案(1)|浏览(168)

我渲染与html 2canvas 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() {
            });
        }
    });
}

字符串

saveJPG.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说类似于“伪造的标记长度”。
屏幕截图的尺寸为650 x9633。对于POST方法来说，这是很多数据吗？

php

来源：https://stackoverflow.com/questions/17672020/html2canvas-save-image-doesnt-work

1条答案

按热度按时间

blmhpbnm1#

如果有人遇到同样的问题，我是这样解决的：
这个问题取决于这样一个事实，即大多数服务器将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);
            });
        }
    });
}

字符串

savePNG.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;
?>

型
干杯！干杯！

展开查看全部

赞(0）回复(0）举报 2024-01-05

我来回答

php html2canvas保存图像不起作用

JavaScript

saveJPG.php

1条答案

JavaScript

savePNG.php

相关问题

热门标签

最新问答