4

html2canvas 0.4.0 でスクリーンショットをレンダリングしており、Web サーバーに画像として保存したいと考えています。

そのために、次の関数を作成しました。

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 は「偽のマーカーの長さ」のようなことを言います。

スクリーンショットのサイズは 650x9633 です。POST メソッドのデータが多すぎますか?

4

1 に答える 1

15

誰かが同じ問題に遭遇した場合に備えて、私がそれを解決した方法は次のとおりです。

この問題は、ほとんどのサーバー+で 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;
?>

乾杯！

于 2013-07-16T13:51:13.047 に答える