我尝试发布使用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;
我希望网址可以在我的页面中回显
您有很多事情需要解决:
alert(imgData)
将无法显示任何图像/图形echo $image;
作为最后一行,但这将无法单独显示图像,您应该使用 echo "<img src='". $image . "'>";
来代替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 . "'>";
?>