html2canvas保存图像不工作 [英] html2canvas save image doesn't work

问题描述

我的渲染与html2canvas 0.4.0的截图，并希望将其保存为图像在我的网络服务器。

I'm rendering a screenshot with html2canvas 0.4.0 and want to save it as image on my webserver.

要做到这一点，我已经写了下面的功能：

To do so, I've written the following function:

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的身体，但我的服务器结果保存在一个已损坏的（？）的文件。

After the canvas is rendered I can perfectly append it to the HTML body, but saving it on my server result in a corrupted (?) file.

我可以读IrvanView的尺寸，但图像是透明/空的？ 该文件大约2.076 KB大。因此，它不是真正为空。

I can read the dimensions in IrvanView, but the image is transparent / empty? The file is about 2.076 KB large. So it's not really empty.

我想这与JPEG以及和它导致损坏的文件和IrfanView中说，像假标记长度。

I tried this with JPEG as well and it results in a corrupted file and IrfanView says something like "bogus marker length".

的截图具有650x9633尺寸。是不是要多数据后的方法？

The screenshot has the dimensions of 650x9633. Is it to much data for a POST-Method?

推荐答案

在万一有人跌倒过同样的问题，这是我如何解决它：

In case someone stumbles over the same problem, here is how I solved it:

这个问题依赖于一个事实，即 + 的网址是PTED为一间codeD空间（如％间$ P $ 20 ）大多数服务器。所以，我需要连接code中的数据，然后再通过 POST 将其发送至我指定的PHP函数。

The problem depended on the fact, that + in URLs is interpreted as an encoded space (like %20) by most servers. So I needed to encode the data first and then send it via POST to my designated PHP function.

下面是我的code：

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

干杯！

这篇关于html2canvas保存图像不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！