setRequestHeader Ошибка при сохранении холста как изображения на сервере

Question

У меня есть highcharts svg, который я преобразовал в png через canvg и отображен на веб-странице. Я бы хотел отправить этот png на сервер, чтобы создать ссылку на изображение. Я следовал код ответа на другой теме:

Renaming an image created from an HTML5 canvas

Мой 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()); 
} 

Мой PHP называется saveDataURL.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» возникает следующая ошибка:

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