Как исправить данные, которые не отображаются на странице, но отображаются при предварительном просмотре в сети

Обратите внимание, что метод HTMLCanvasElement.toDataURL() возвращает URL-адрес данных, содержащий представление изображения в формате, указанном параметром типа. Для получения более подробной информации вы можете обратиться к документации Mozilla.

Ссылаясь на опубликованный вами код, вам нужно отметить и/или исправить ряд вещей:

1. обычное оповещение JS, например alert(imgData), не сможет отображать какие-либо изображения/графику
2. PHP, который вы пытаетесь использовать, имеет echo $image; в качестве последней строки, но он не сможет отображать изображение сам по себе, вместо этого вам следует использовать echo "<img src='". $image . "'>"; (если вы хотите отображать изображение автономным способом)
3. imgData не сможет ничего вернуть из PHP через ajax, вместо этого вам следует использовать response, поскольку вы используете success: function(response) { ... }

Итак, чтобы продемонстрировать, как вы можете передать данные холста в PHP через ajax, а затем вернуться, вы можете использовать следующее

HTML

<script
  src = "https://code.jquery.com/jquery-3.7.1.js"
  integrity = "sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4 = "
  crossorigin = "anonymous"></script>


<div id=ajaxreturn></div>

<canvas id = "chart1" width = "200" height = "100" >

<script>
   var c = document.getElementById("chart1");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95, 50, 40, 0, 2 * Math.PI);
   ctx.stroke();
</script>



<script>
   var canvas = document.getElementById('chart1');
   var imgData = canvas.toDataURL('image/png', 1);
     //console.info(imgData);

        $.ajax({
            type: "POST",
            url: "testajax.php",
            data: { imgData: imgData },
            success: function(response) {
               document.getElementById('ajaxreturn').innerHTML=response;
            }
        });

</script>

PHP (testajax.php)

<?php
$image = $_POST['imgData'];
echo "<img src='". $image . "'>"; 
?>

Примечание:

1. Я добавил код для рисования круга на холсте, чтобы что-то можно было передать в PHP с помощью ajax (но, конечно, вы можете использовать другие методы, чтобы нарисовать что-то на холсте)
2. Возвратом ajax будет оператор отображения изображения в форме «<img src='". $image . "'>"». Поскольку такое изображение не будет отображаться в предупреждении, я добавил в HTML DIV с идентификатором «ajaxreturn», чтобы система могла разместить возвращаемое изображение. в этом DIV

Результат (я сделал дамп экрана своего браузера) будет:

Нижний круг — это тот, который мы нарисовали на холсте, а верхний круг — это изображение, возвращаемое из PHP через ajax.