javascript - 将图像从服务器发送到页面上的 Canvas

Question

• 我在A页上有一个表格。
• 我上传一张图片并将其发布到服务器。
• 服务器上传图片并将用户重定向到页面B。
• 我在页面 B 上有一个 Canvas ，我想在上面使用 JavaScript 绘制该图像。

问题:

• 服务器如何将图像发送到页面B？

Answer 1

这是我从服务器获取路径的想法

<form action="pageA.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

pageA.php:

  <?php
    session_start();
    $todir = "uploads/";
    $file = $tooir . basename($_FILES["fileToUpload"]["name"]);
    $_SESSION['img']=$todir;
    $checkimg = 1;
    $imageType = strtolower(pathinfo($file,PATHINFO_EXTENSION));
    // Check if image file is a actual image or fake image
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
        if($check !== false) {
            echo "File is an image - " . $check["mime"] . ".";
            $checkimg  = 1;
        } else {
            echo "File is not an image.";
            $checkimg  = 0;
        }if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $file)) {
        $up=1 ;  
        $_SESSION['img']=$todir; 
        $_SESSION['up']=$up;
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
     header("location:./pageB.php");

    } else {
up=o;// checking whether file is uploaded
        echo "Sorry, there was an error uploading your file.";
    }
    }
    ?>

pageB:(在页面顶部写入 session_start()，在页面底部写入 script)

<?php
  session_Start();
  if($_SESSION['up'])
   {
     echo "<script>window.onload = function() {
    var canvas=document.getElementById('myCanvas');
    var context=c.getContext('2d');
    var image=document.getElementById('draw');
    ctx.drawImage(image,10,10);
    };</script><img src=$_SESSION['img'] id=draw > <canvas id=myCanvas> </canvas>";
 }
?>