Javascript 在js中将php变量用作图像src？

我正在做一个项目，我想用js在图像上绘制点，但我用php进行图像查询。我的问题是如何使用imageObj.src将php变量传递给js脚本

<!--call $img query to display image-->
<?php if(isset($img) && mysqli_num_rows($img)) : ?>
    <?php while($row = mysqli_fetch_assoc($img))
    {
    //the variable for the map_image_filepath stored in database
      $filepath = $row['map_image_filepath'];?>

      <canvas id="canvas" width="400" height="300">Canvas not supported</canvas>
      <script src = "jquery.min.js"></script>
      <script>

          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var imageObj = new Image();

          window.onload = function()
          {
              context.drawImage(imageObj, 0, 0);
              draw();
          }

          function draw()
          {
              canvas = document.getElementById('canvas');                     
              ctx = canvas.getContext('2d');
              ctx.fillStyle = "black";

              for(var i = 0; i < 2; i++)
              {
                  var x = Math.random()*400;
                  var y = Math.random()*300;
                  ctx.beginPath();
                  ctx.arc(x , y, 2, 0, 2 * Math.PI, false);
                  ctx.fill();
                  ctx.stroke();
                  ctx.closePath();
              }
           }

           var image = '<?php echo $filepath ?>';

           imageObj.src = image;
</script>

不支持画布
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
window.onload=函数（）
{
drawImage（imageObj，0,0）；
draw（）；
}
函数绘图（）
{
canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“黑色”；
对于（变量i=0；i<2；i++）
{
var x=数学随机数（）*400；
var y=Math.random（）*300；
ctx.beginPath（）；
弧（x，y，2，0，2*Math.PI，false）；
ctx.fill（）；
ctx.stroke（）；
ctx.closePath（）；
}
}
var图像=“”；
imageObj.src=图像；

您没有DOM init

<script>
    var canvas = null;
    var context = null;
    var imageObj = null;

    window.onload = function(){
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        imageObj = new Image();

        var image = '<?php echo $filepath; ?>';
        imageObj.src = image;
        context.drawImage(imageObj, 0, 0);

        draw();
    }

    function draw() {
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "black";

        for(var i = 0; i < 2; i++) {
            var x = Math.random()*400;
            var y = Math.random()*300;
            ctx.beginPath();
            ctx.arc(x , y, 2, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
        }
    }
</script>

var=null；
var-context=null；
var-imageObj=null；
window.onload=函数（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
imageObj=新图像（）；
var图像=“”；
imageObj.src=图像；
drawImage（imageObj，0,0）；
draw（）；
}
函数绘图（）{
ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“黑色”；
对于（变量i=0；i<2；i++）{
var x=数学随机数（）*400；
var y=Math.random（）*300；
ctx.beginPath（）；
弧（x，y，2，0，2*Math.PI，false）；
ctx.fill（）；
ctx.stroke（）；
ctx.closePath（）；
}
}

一个简单的解决方案是在html div元素中添加值，并使用Javascript使用getElementByID（divID）.val（）将该值带入

例如：

    //html printing value as an example you can do anything else
    <div id="canvasImage"><?php echo $filepath; ?></div>

    //javascript
    <script> 
           var image = document.getElementById(canvasImage).value;
    </script>  

//html打印值作为示例，您可以执行其他任何操作
//javascript
var image=document.getElementById（canvasImage）.value；

我觉得您的代码应该可以使用。你试过了吗？如果是的话，具体出了什么问题？看起来不错。出了什么问题？你的问题是白茫茫确保它能正常工作。。。有什么问题吗？@Davі没有任何错误。它只显示一个空白画布。不是设置了图像的元素。元素出现在DOM中的

id=“canvas”

元素之后。搜索前无需等待

load

事件。@coudy.one您在我对它的评论有效后编辑了您的帖子now@em96请关闭这个问题好吗？