上传图片，显示以在下一页上进行编辑

Question

我正在尝试在一页上载JPEG / PNG文件，并在下一页上显示该文件以进行编辑。棘手的部分是它需要保存在MySQL数据库中。我正在使用画布作为下一页图像的占位符。

这是我当前正在使用的上传表单。

<form action="/tpb3/template/upload.php" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="name">Name</label>
        <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='type' name='type' id='template' value='template'>
    </div>
    <div class="form-group">
      </div>
      <button id="upload_img" class="btn btn-primary" type="submit" value="Next">
  </form>
  <hr/>

这是upload.php

<?php
require('/var/www/html/tpb3/php/autoload.php');
$megabyte = 8000000;
$db = "new Database();";

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

function addSourceImage($sourceId, $filetype){
    if(!$this->isLoggedIn()){
        return ';failed-not-logged-in';
    }


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{
        imagedestroy($img);
        return true;
    }
}

function isJpeg($filepath){
    $img = @imagecreatefromjpeg($filepath);
    if($img === false){
        return false;
    } else{
        imagedestroy($img);
        return true;
    }
}

//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/$dir/$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 .= "Main image corrupted/not a valid jpg/png, ";
        $valid = false;
    } elseif ($_FILES["upload"]["size"] > 10 * $megabyte) {
        $error .= "File larger than 10 MB, ";
        $valid = false;
    }
}

    if($selectedType == "template"){

        $oType = strtolower(pathinfo(basename($_FILES["overlay"]["name"]), PATHINFO_EXTENSION));
        $overlayFileDest = "img/temp/$id-overlay.$oType";
        $size = @getimagesize($_FILES["overlay"]["tmp_name"]);
        $hasOverlay = true;

        if($_FILES["overlay"]["tmp_name"] != ''){
            if($size === false) {
                $error .= "Overlay not an image, ";
                $valid = false;
            } elseif($size[0] > 2000 || $size[1] > 2000){
                $error .= "Overlay larger than 2000px, ";
                $valid = false;
            } elseif($oType != 'png'){
                $error .= "Overlay not a valid filetype, ";
                $valid = false;
            } elseif(!isPng($_FILES["overlay"]["tmp_name"])){
                $error .= "Overlay corrupted/not a valid png, ";
                $valid = false;
            } elseif ($_FILES["upload"]["size"] > 10 * $megabyte) {
                $error .= "Overlay larger than 10 MB, ";
                $valid = false;
            }
        } else{
            $hasOverlay = false;
        }

    }

    if($valid = true){
        if($selectedType == 'template'){
            $_SESSION['activeId'] = $id;
            $_SESSION['activeImg'] = $uploadFileDest;
            $_SESSION['activeOverlay'] = $hasOverlay ? $overlayFileDest : '';
            move_uploaded_file($_FILES["upload"]["tmp_name"], $uploadFileDest);
            move_uploaded_file($_FILES["overlay"]["tmp_name"], $overlayFileDest);
            header('Location: designer.php');
        } else{
            $response = $db->addSourceImage($id, $type);
            if($response == ';success'){
                move_uploaded_file($_FILES["upload"]["tmp_name"], $uploadFileDest);
                $_SESSION['lastId'] = $id; //for the success message
                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)));
    }
}
?>

这是我要显示图像的地方。

<a id="preview" class="btn btn-info" data-lightbox="Preview" data-title="">Preview</a>
<form action="/template/positions" method="post" style="display: inline">
<input type="hidden" id="form-positions" name="rects">
<input type="submit" id="designer-submit" class="btn btn-primary" value="Submit">
    <div class="col-md-8">
          <canvas id="canvas" style="margin: 0 auto; display: block;"></canvas>
      </div>

在将图像传递到下一页时，我需要一些帮助。然后，当发送提交按钮时，编辑后的图像将保存到数据库中。如果需要更多信息，我很乐意提供。