New Topic/Question
Reply
I have created a program that uses PHP on the backend to allow the user to select a local JPG or PNG image and apply filters to the image such as convert to: Black and white, Sepia, Negative and also Edge detection which gives an outline of that image. The user can thereafter save the modified image to a user defined size.
It uses an open source javascript image manipulation library called pixastic to perform most of the manipulations (which I am not allowed to attach) and a CSS file which I have attached.
Anyhow the program works perfectly when I tested it on WampServer to emulate the server environment.
However, I have moved the code to an Amazon EC2 apache server running ubuntu. The GUI screen shows up but once I have browsed for the image and try to load it, I get an error message: "could not upload file" (screen grab attached shows the GUI and the error message).
I would be really very extremely grateful if someone could say why this is happening! Why is it working on the locahost but giving error messages on this cloud server?
Many thanks!
My PHP scripts are index.php and save_image.php:
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Manipulation</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="pixastic.js"></script>
</head>
<script language = 'javascript'>
var isEdit = false;
function BlackAndWhite(){
Pixastic.process(document.getElementById("new_image"), "desaturate", {average : false});
Pixastic.process(document.getElementById("tmp"), "desaturate", {average : false});
isEdit = true;
}
function Negative(){
Pixastic.process(document.getElementById("new_image"), "invert");
Pixastic.process(document.getElementById("tmp"), "invert");
isEdit = true;
}
function Sepia(){
Pixastic.process(document.getElementById("new_image"), "sepia");
Pixastic.process(document.getElementById("tmp"), "sepia");
isEdit = true;
}
function EdgeDetection(){
Pixastic.process(document.getElementById("new_image"), "edges", {mono:true,invert:false});
Pixastic.process(document.getElementById("tmp"), "edges", {mono:true,invert:false});
isEdit = true;
}
function SaveAsJPEG(){
if(isEdit){
document.saveForm.dataImg.value = document.getElementById("tmp").toDataURL("image/jpeg");
document.forms["saveForm"].submit();
}
else{
var canvas = document.createElement("canvas");
var img=document.getElementById("tmp");
canvas.width = img.width;
canvas.height = img.height;
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
document.saveForm.dataImg.value = canvas.toDataURL("image/jpeg");
document.forms["saveForm"].submit();
}
}
function SaveAsPNG(){
if(isEdit){
document.saveForm.dataImg.value = document.getElementById("tmp").toDataURL("image/png");
document.forms["saveForm"].submit();
}
else{
var canvas = document.createElement("canvas");
var img=document.getElementById("tmp");
canvas.width = img.width;
canvas.height = img.height;
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
document.saveForm.dataImg.value = canvas.toDataURL("image/png");
document.forms["saveForm"].submit();
}
}
</script>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h2>Image Manipulation Application</h2>
</div>
</div>
<form enctype="multipart/form-data" name="UploadForm" action="index.php" method="post" >
<div id="menu">
<ul>
<input class="button" type="submit" name="upload" value="Load"/>
<input class="button" type="button" name="BW" value="Black & White" onclick="BlackAndWhite()"/>
<input class="button" type="button" name="neg" value="Negative" onclick="Negative()"/>
<input class="button" type="button" name="sep" value="Sepia" onclick="Sepia()"/>
<input class="button" type="button" name="ED" value="Edge Detection" onclick="EdgeDetection()"/>
<input class="button" type="button" name="undo" value="Undo" onclick="Pixastic.revert(document.getElementById('new_image')); Pixastic.revert(document.getElementById('tmp')); isEdit = false;"/>
</ul>
<br/><input type="file" name="upImg"/><br/>
</div>
</form>
<div id="page">
<div id="before">
<?php
function is_valid_type($file){
$valid_types = array("image/jpg", "image/jpeg", "image/bmp", "image/png");
if (in_array($file['type'], $valid_types))
return 1;
return 0;
}
if(isset($_POST['upload'])){
$TARGET_PATH = "images/";
$image = $_FILES['upImg'];
$TARGET_PATH .= $image['name'];
if(is_valid_type($image)){
if (move_uploaded_file($image['tmp_name'], $TARGET_PATH)){
echo'<div id="picture"><img id="old_image" src="'.$TARGET_PATH.'" width="480"/></div>';
list($width, $height) = getimagesize($TARGET_PATH);
}
else{
echo "<br/><center><h3>Could not upload file</h3></center>";
exit;
}
}
else{
echo "<br/><center><h3>invalid image - try again</h3></center>";
exit;
}
}
else{
exit;
}
?>
</div>
<div id="after">
<?php
echo'<div id="picture"><img id="new_image" src="images/'.$_FILES["upImg"]["name"].'" width="480"/></div>';
?>
</div>
<?php
echo '<center><h3>Size of Image</h3>
<form id="saveForm" name="saveForm" method="post" action="save_image.php">
<input type="hidden" name="dataImg" id="dataImg" value="">
<h3><input type="text" id="width" name="width" size="10" value="'.$width.'">X<input type="text" id="height" name="height" size="10" value="'.$height.'">px</h3>
<br/><input class="btnSave" type="button" name="save" value="Save as JPG" onclick="SaveAsJPEG()"/>
<input class="btnSave" type="button" name="save" value="Save as PNG" onclick="SaveAsPNG()"/>
</form>
</center><br/>
<script language = "javascript">
var old_height = document.getElementById("height").value;
var old_width = document.getElementById("width").value;
</script>
<img id="tmp" class="hidden" src="images/'.$_FILES["upImg"]["name"].'" width="'.$width.'" height="'.$height.'"/>';
?>
</div>
</div>
</body>
</html>
save_image.php
<?php
class SimpleImage {
var $image;
var $image_type;
var $h;
var $w;
function load($filename) {
$image_info = getimagesize($filename);
list($this->w, $this->h) = getimagesize($filename);
$this->image_type = $image_info[2];
if( $this->image_type == IMAGETYPE_JPEG ) {
$this->image = imagecreatefromjpeg($filename);
} elseif( $this->image_type == IMAGETYPE_PNG ) {
$this->image = imagecreatefrompng($filename);
}
}
function save($filename) {
if( $this->image_type == IMAGETYPE_JPEG ) {
imagejpeg($this->image,$filename);
} elseif( $this->image_type == IMAGETYPE_PNG ) {
imagepng($this->image,$filename);
}
}
function resize($width,$height) {
$new_image = imagecreatetruecolor($width, $height);
imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->w, $this->h);
$this->image = $new_image;
}
}
$data = $_POST['dataImg'];
$w = $_POST['width'];
$h = $_POST['height'];
$uri = substr($data,strpos($data,",")+1);
$type = substr($data, 0, strpos($data,";"));
if($type == "data:image/jpeg")
$file = "new_image.jpeg";
if($type == "data:image/png")
$file = "new_image.png";
$decodeData = base64_decode($uri);
file_put_contents($file, $decodeData);
$image = new SimpleImage();
$image->load($file);
$image->resize($w, $h);
$image->save($file);
if (file_exists($file)) {
header('Content-Description: File Transfer');
if($type == "data:image/jpeg")
header('Content-Type: image/jpeg');
if($type == "data:image/png")
header('Content-Type: image/png');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
ob_clean();
flush();
readfile($file);
exit;
header("Location: index.php");
}
else {
echo "'.$file.' not found";
}
?>
Attached image(s)
Attached File(s)
-
style.css (1.81K)
Number of downloads: 18
MultiQuote
| 