Question

我正在开展一个项目，其中我想使用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>

Answer 1

一个简单的解决方案是在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>

Answer 2

你没有DOM init。

is_unique

在js中使用php变量作为图像src？

2 个答案: