如何修复数据不显示在页面但出现在网络预览中的问题

Question

我尝试发布使用ajax转换为url的图像。问题是

$image = $_POST['imgData'];

不显示任何内容，但如果我检查网络预览上的开发人员工具，则可以看到数据。

这是我的脚本

        var canvas = document.getElementById('chart1');
        var imgData = canvas.toDataURL('image/png', 1);
        //console.log(imgData);


        $.ajax({
            type: "POST",
            url: "?f=view_customer_list",
            data: { imgData: imgData },
            success: function(response) {
                alert(imgData);
            }
        });

php代码

  $image = $_POST['imgData'];
  
  echo $image;

我希望网址可以在我的页面中回显

Answer 1

您有很多事情需要解决：

1. 普通的JS警报，例如

   alert(imgData)

   将无法显示任何图像/图形
2. PHP 不会尝试使用

   echo $image;

   作为最后一行，但这将无法单独显示图像，您应该使用

   echo "<img src='". $image . "'>";

   来代替

3. imgData

   将无法通过 ajax 从 PHP 返回任何内容，您应该使用

   response

   代替。

因此，为了演示如何通过ajax将画布数据传递给PHP然后返回，您可以使用以下代码

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.log(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 . "'>"; 
?>