서버에서 Canvas로 이미지를 저장할 때 setRequestHeader 오류가 발생했습니다.

Question

canvg를 통해 PNG로 변환하여 웹 페이지에 표시 한 하이 차트 svg가 있습니다. 그 다음이 png를 서버에 보내 이미지에 대한 링크를 만들고 싶습니다. 나는 다른 주제에 대한 응답 코드를 다음했다 :

Renaming an image created from an HTML5 canvas

내 자바 스크립트 코드는 다음과 같다 :

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"줄에 다음 오류가 표시됩니다.

,515,

Component returned failure code: 0x804b000f (NS_ERROR_IN_PROGRESS) [nsIXMLHttpRequest.setRequestHeader] http://whichchart.com/oil.js Line 102

크롬에서 동일한 행에 오류 :

Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 saveDataURLoil.js:106 (anonymous function)

예는 여기에서 볼 수있다 : whichchart.com. 도울 수 있니? 감사.

Answer 1

좋아, 그래서 많이 검색 한 후 다른 해결책을 찾았습니다. 링크는 여기에 있습니다 :

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

는 캔버스라는 testCanvas을 가정하면,이 자바 스크립트와 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); 
} 
?>