javascript — отправка данных Canvas в файл изображения через переполнение стека
Так что после долгих лет поиска я нашел эта почта что является ответом на мою проблему. Когда я попробовал это, файл изображения был создан, но внутри него не было никаких данных. Вот мой код ниже. Можете ли вы показать мне, если я что-то пропустил или какие-либо исправления, которые сделают файл изображения читабельным.
Спасибо
index.html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="364.8" height="220.8" style=" border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "20pt Tahoma";
context.fillStyle = '#3a3a3a';
context.fillText("TEST", 20, 100);
context.font = "15pt Tahoma";
context.fillStyle = '#3a3a3a';
context.fillText("[email protected]", 20, 130);
};
imageObj.src = "T1.png";
var testCanvas = document.getElementById('myCanvas');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'http://www.lapisdesigns.tk/Lapisdesigns/process.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );
</script>
</body>
</html>
process.php
<?php
$rawData = $_POST['imageData'];
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
//Create the image
$fp = fopen('sigs/test1.png', 'w');
fwrite($fp, $unencoded);
fclose($fp);
$file_name = 'test1.png';
$file_size = strlen($filteredData[1])/1024; //This may be wrong, doesn't seem to break for me though.
$fh = fopen('sigs/test1.png', 'r');
$content = fread($fh, $file_size);
$content = base64_encode($content);
fclose($fh);
?>
Решение
ajax.send("canvasData"+canvasData );
^^^^^^^^
$rawData = $_POST['imageData'];
^^^^^^^^
Так как у вас нет = там, вы отправляете за один очень длинный canvasDatablahblahblah имя ключа, без значения. И даже если имя ключа было правильно установлено на canvasDataваш код PHP ищет совершенно другое имя imageData,
Пытаться
ajax.send("imageData=" + canvasData);
^^^^^^^^^--- note new new
^---note the =
вместо.
Другие решения
Других решений пока нет …