Question

我有一个人们可以涂鸦的画布。我创建了一个按钮，将每个绘图提交到我的目录中名为“images”的文件中，该文件位于主文件“Espace Utopique”中。每个文件都有一个不同的名称“monimage_”time（）。所有这一切都很完美，图像以png格式发送到我的文件夹，我可以阅读它们。

我正在做的事情是在窗口打开时将其中一个随机图像插入我的画布。这个想法是人们建立在其他人的绘画之上。我找到了一个PHP代码，我将其保存在名为“retrieve.php”的PHP文件中：

<?php
$imagesDir = 'Espace Utopique/images';

$images = glob($imagesDir . '*.{png}', GLOB_BRACE);

$randomImage = $images[array_rand($images)];
if($res) {
      echo "ok";
  }
      else {echo "ko";}
?>

我发现代码可以让我把图像放到html5画布中：例如。

<script>
window.onload = function() {
var canvas=document.getElementById("drawing"); // grabs the canvas element
var context=canvas.getContext("2d"); // returns the 2d context object
var img=new Image() //creates a variable for a new image

img.src= "images/vft.jpg" // specifies the location of the image
context.drawImage(img,20,20); // draws the image at the specified x and y location
}
</script>

我遇到的麻烦就是把两者放在一起。我已经尝试将这个AJAX代码放在某个地方，但似乎没有任何工作：

    $.ajax({


  type: "POST",
  url: "retrieve.php",


}).done(function( msg ) {
  alert( msg );


});

}

有人请帮助我:)我必须遗漏一些非常明显和愚蠢的东西。谢谢！

Answer 1

这样的东西应该有用，两个功能结合起来;）

<script>
window.onload = function() {
    $.ajax({
        type: "POST",
        url: "retrieve.php",
        succes: function( data ) {
            var canvas=document.getElementById("drawing"); // grabs the canvas element
            var context=canvas.getContext("2d"); // returns the 2d context object
            var img = new Image(); //creates a variable for a new image

            img.src = data; // specifies the location of the image
            context.drawImage(img,20,20); // draws the image at the specified x and y location
        }
    });
}
</script>

retrieve.php：

$imagesDir = 'Espace Utopique/images';

$images = glob($imagesDir . '*.{png}', GLOB_BRACE);

$randomImage = $images[array_rand($images, 1)];
if($randomImage) {
    echo $randomImage;
}
else {echo "path/to/default/image";} //in case $randomimage fails

使用AJAX将随机图像从本地文件上传到html5画布

1 个答案: