0

人々が落書きできるキャンバスがあります。メインファイル「Espace Utopique」にある「images」というディレクトリ内のファイルに各図面を送信するボタンを作成しました。各ファイルには「monimage_time()」という名前が付けられています。これはすべて完全に機能し、画像はpng形式でフォルダーに送信され、読み取ることができます。

ウィンドウが開いたときに、これらのランダムな画像の1つをキャンバスに挿入するのに問題があります。アイデアは、人々が他の人の絵から構築するというものです。「retrieve.php」という名前の 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>

私が問題を抱えているのは、2つを一緒にすることです。この AJAX コードをどこかに入れてみましたが、何も機能していないようです:

    $.ajax({


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


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


});

}

誰かが私を助けてください:)本当に明白でばかげた何かが欠けているに違いありません。ありがとう！

4

1 に答える 1

0

このようなものが機能するはずです、2つの機能が組み合わされています;）

<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
于 2013-03-07T11:19:27.113 に答える