1

canvgを介してpngに変換し、Webページに表示したhighchartssvgがあります。次に、このpngをサーバーに送信して、画像へのリンクを作成します。私は別のトピックの回答コードに従っていました：

HTML5キャンバスから作成された画像の名前を変更する

私のJavaScriptコードは次のとおりです。

var timeout = window.setTimeout(function() {
    canvg(document.getElementById('canvas'), chart.getSVG());
}, 10000);

var canvas = document.getElementById("canvas");

var img = canvas.toDataURL("images/png");
document.write('<img src="'+img+'"/>');

saveDataURL(img)

function saveDataURL(canvas) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            window.location.href = request.responseText;
        }
    };
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.open("POST", "saveDataURL.php", true);
    request.send("dataURL=" + canvas.toDataURL());
}

saveDataURL.phpと呼ばれる私のphpは次のようになります。

$dataURL = $_POST["dataURL"];
$encodedData = explode(',', $dataURL)[1];
$decodedData = base64_decode($encodedData);
file_put_contents("temp/faizan.png", $decodedData);
echo "http://whichchart.com/temp/faizan.png";

Firefox 12では、「request.setRequestHeader」行に次のエラーがスローされます。

コンポーネントが失敗コードを返しました：0x804b000f（NS_ERROR_IN_PROGRESS）[nsIXMLHttpRequest.setRequestHeader] http://whichchart.com/oil.js 行102

Chromeでは、同じ行のエラーは次のとおりです。

キャッチされないエラー：INVALID_STATE_ERR：DOM例外11 saveDataURLoil.js：106（無名関数）

例はここで見ることができます：whichchart.com。手伝ってくれますか？ありがとう。

4

1 に答える 1

1

さて、私は多くの検索の後に別の解決策を見つけました。リンクはここにあります：

http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

testCanvasというキャンバスがあるとすると、このjavascriptとphpは機能します。

var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData );  

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type
    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    // Need to decode before saving since the data we received is already base64 encoded
    $unencodedData=base64_decode($filteredData);

    //echo "unencodedData".$unencodedData;

    // Save file.  This example uses a hard coded filename for testing,
    // but a real application can specify filename in POST variable
    $fp = fopen( 'test.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
}
?>
于 2012-05-05T00:20:00.007 に答える