Не удается сохранить полное изображение холста на сервер

Question

У меня проблема с сохранением изображения холста на моем сервере. Я пробовал несколько вещей, и единственное, что, похоже, работает прямо сейчас, - это одно предложение, которое я нашел, оглядываясь вокруг, чтобы заполнить скрытое текстовое поле в форме и отправить его на мою php-страницу, которая может принять сообщение и преобразовать его и сохранить его на сервере. Хотя это действительно работает, оно отправляет только 1/8 изображения.

Когда я проверяю содержимое toDataURL(), это то же количество данных, которое передается на страницу PHP, поэтому я не уверен, где изображение обрезается, а размер изображения составляет всего около 380 кб.

Вот что у меня есть:

Javascript:

var canvas = document.getElementById("myCanvas"); 
var image = canvas.toDataURL(); 
document.getElementById("savecarddata").value = image; 

PHP

$upload_dir = 'mydirectory'; 
$img = $_POST['savecarddata']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = $upload_dir.rand().".png"; 
$success = file_put_contents($file, $data); 

Это сохранить изображение, а только его верхнюю часть. Я пробовал ajax, но я не могу заставить его работать правильно, так что это было лучшее для меня решение. Я хотел бы помочь!

Заранее благодарен!

Answer 1

Я не знаю, если это актуально, но проверьте, как вы устанавливаете ширину и высоту холста. Вы должны установить их внутри тега canvas.

<canvas width='yourValue' height='yourValue'></canvas> 

Answer 2

Это, как я это сделал:

Использование Ajax

var canvas = document.getElementById("myCanvas"); 
    var canvasData = canvas.toDataURL('image/png'); 
    var ajax = new XMLHttpRequest();    
    var postdata='saveimage.php'; 
    ajax.open('POST', postdata, false); 
    ajax.setRequestHeader('Content-Type', 'application/upload'); 
    ajax.send(canvasData); 

затем в saveimage.php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{ 
$imgdata = $GLOBALS['HTTP_RAW_POST_DATA']; 

    $filteredData=substr($imgdata, strpos($imgdata, ",")+1);// Remove the headers (data:,) part. 
    $data = base64_decode($filteredData);//decode data 
    $im = imagecreatefromstring($data); //create image 
    if ($im !== false) { 
     imagesavealpha($im, true); 
     imagepng($im, "result.png",9); 
    } 
    else { 
     echo 'An error occurred.'; 
    } 

    } 

вы также можете передать аргументы как GET переменных в AJAX

var postdata="saveimage.php?imagename=" + document.getElementById("someFeild").value;