上载图片，然后在下一页将其显示为画布

Question

我正在尝试创建一个页面，该页面允许使用Canvas处理上传的图像。到目前为止，我还没有将图像从一页（提交表单）转发到包含画布的另一页的运气。我正在使用PHP，Javascript和HTML，以尝试将图像从提交表单发送到画布空间。

这是提交表单。

  <form action="designer.php" method="post" enctype="multipart/form-data">
    <div class="form-group">
      <label for="name">Name</label><?php
      include('/tbp3/php/autoload.php');
      header('Content-Type: application/json');
      $fullpath = $_SESSION['activeImg'];
      $size = getimagesize($fullpath);
      echo json_encode(array('x' => $size[0], 'y' => $size[1], 'path' => $fullpath, 'lastPosJson' => isset($_SESSION['lastPos']) ? $_SESSION['lastPos'] : '[]'));
      $db->close();
      ?>
      <p>2-32 characters</p>
      <input class="form-control" type="text" name="name" id="name">
    </div>
    <div class="form-group">

      <p>JPEG/PNG under 2MB only</p>
      <label class="btn btn-default" for="image">Choose Image</label>
      <span></span>
      <input class="inputfile" type="file" name="image" id="canvas">
    </div>

    <div class="form-group">
    </div>
    <input class="btn btn-primary" type="submit" value="Next">
  </form>

这是我用来确认上传的文件是PNG或JPEG的JavaScript。注意：我是Java新手。

var validTypes = ['png', 'jpg', 'jpeg'];

$(document).ready(function(){
    $('form').submit(function(e){//on submission..
        var file = $('#upload').val();
        var isValid = true;
        var error = '';

        if(file == ''){
            error = 'Select a file before proceeding!';
            $('#upload').addClass('validation-error');
            isValid = false;
        } else{
            var type = /[^\.]*$/.exec(file).toString().toLowerCase();
            if($.inArray(type, validTypes) == -1){ 
                error = type + ' is an invalid type for the image! Please use ' + validTypes.join(', ').replace(/,([^,]*)$/, " or$1.");
                $('#upload').addClass('validation-error');
                isValid = false;
            }
        }
});

这是在'Designer.php'页面上。我希望图像显示在标签上。

<div class="row canvasarea">
    <div class="col-xs-6 header">Canvas</div>
        <div class="col-xs-6 header">Live View</div>
        </div>
        <div class="row canvasarea">
        <div class="col-xs-6 help">TEXT</div>
            <div class="col-xs-6 help">TEXT</div>
                </div>
                <div class="row canvasarea">
                <div class="col-xs-6">
                                <canvas id='canvas'></canvas></div>
            <div class="col-xs-6">
                        <img id='liveupdate'/><br></div>

我用来将其保存到服务器的PHP脚本。

<?php
require('/var/www/html/tpb3/php/autoload.php');
session_start();

$megabyte = 8000000;
$db = "new Database();";

function getImage(){
    $id = $this->getTemplateId();
    $type = $this->getFiletype();
    return "img/template/$id.$type";
 }

function addTemplate($templateId, $filetype){
    if(!$this->isLoggedIn()){
    echo "You're not logged in";
        return '';
    }


function isValidFileType($type){
    $type = strtolower($type);
    $types = array('jpeg', 'jpg', 'png');
    for($i = 0; $i < count($types); $i++){
        if($type === $types[$i]){
            return true;
        }
    }
    return false;
}

function isPng($filepath){
    $img = @imagecreatefrompng($filepath);
    if($img === false){
        return false;
    } else{
    echo "Not a PNG";
        imagedestroy($img);
        return true;
    }
}

function isJpeg($filepath){
    $img = @imagecreatefromjpeg($filepath);
    if($img === false){
        return false;
    } else{
    echo "Not a JPEG";
        imagedestroy($img);
        return true;
    }
}

if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}

if(!empty($_POST['selectedType']) ){
    $selectedType = $_POST['type'];
}

if(isset($_POST["type"]))

$selectedType = $_POST["type"];
$dir = $selectedType == 'template' ? 'temp' : 'sourceimages';

if(isset($_POST["submit"])) {


    $valid = true;
    $id = uniqid();
    $type = strtolower(pathinfo(basename($_FILES['upload']['name']), PATHINFO_EXTENSION));
    $uploadFileDest = 'img/template/$id.$type';
    $size = @getimagesize($_FILES["upload"]["tmp_name"]);
    $error = '';

    if($size === false) {
        $error .= "Main image not a valid image, ";
        $valid = false;
    } elseif($size[0] > 2000 || $size[1] > 2000){
        $error .= "Image larger than 2000px, ";
        $valid = false;
    } elseif(!isValidFileType($type)){
        $error .= "Not a valid filetype, ";
        $valid = false;
    } elseif(!isJpeg($_FILES["upload"]["tmp_name"]) && !isPng($_FILES["upload"]["tmp_name"])){
        $error .= "Image is not a valid jpg/png. ";
        $valid = false;
    } elseif ($_FILES["upload"]["size"] > 2 * $megabyte) {
        $error .= "File larger than 2 MB, ";
        $valid = false;
    }
}

    if($valid = true){
        if($selectedType == 'template'){
            $_SESSION['activeId'] = $id;
            $_SESSION['activeImg'] = $uploadFileDest;
            move_uploaded_file($_FILES["upload"]["tmp_name"], $uploadFileDest);
            header('Location: designer.php');
        } else{
            $response = $db->addSourceImage($id, $type);
            if($response == ';success'){
                move_uploaded_file($_FILES["upload"]["tmp_name"], $uploadFileDest);
                $_SESSION['lastId'] = $id;
                header('Location: success.php');
            } else{
                header('Location: submit.php?e='.urlencode("Database failed with message: $response"));
            }
        }
    } else{
        header('Location: submit.php?e='.urlencode(substr($error, 0, strlen($error) - 2)));
    }
}

?>

任何朝正确方向的推动都会受到赞赏。