9 Replies - 1634 Views - Last Post: 04 October 2012 - 08:16 AM Rate Topic: -----

#1 conrad101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 14-November 11

image manipulation program works on localhost but not on actual server

Posted 03 October 2012 - 05:17 AM

Hi

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 Image

Attached File(s)

  • Attached File  style.css (1.81K)
    Number of downloads: 39


Is This A Good Question/Topic? 0
  • +

Replies To: image manipulation program works on localhost but not on actual server

#2 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,139
  • Joined: 08-August 08

Re: image manipulation program works on localhost but not on actual server

Posted 03 October 2012 - 05:28 AM

First determine if you can upload files at all on that site. Try a very simple script that only uploads files, with no Javascript, css, or extraneous HTML. If that doesn't work you'll need to contact your host.
Was This Post Helpful? 0
  • +
  • -

#3 conrad101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 14-November 11

Re: image manipulation program works on localhost but not on actual server

Posted 03 October 2012 - 06:55 AM

Thankyou CTphpnweb that's very helpful!

I will give it a try.

In principle - do you feel that if the app works under localhost but doesn't work on a live cloud server, is it likely to be something to do with firewall settings or file permissions?
Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,139
  • Joined: 08-August 08

Re: image manipulation program works on localhost but not on actual server

Posted 03 October 2012 - 07:17 AM

Generally, but there could be other issues such as different file paths.
Was This Post Helpful? 0
  • +
  • -

#5 conrad101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 14-November 11

Re: image manipulation program works on localhost but not on actual server

Posted 03 October 2012 - 07:37 AM

Yes that's helpful! Looking at the PHP code, it isn't obvious, that is unless I'm missing something, that file paths would generate a problem here. Guess it must be the server causing trouble.

Thanks again!
Was This Post Helpful? 0
  • +
  • -

#6 conrad101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 14-November 11

Re: image manipulation program works on localhost but not on actual server

Posted 04 October 2012 - 04:25 AM

Thanks for the suggestions!

I can now get the images to display, and apply filters and such like, that part now works fine. The issue seemed to be with permissions of directories on the server side, chmod fixed that.

However, my code for saving to the local machine is wrong. Although on the localhost I was able to save to the local machine, now with it on a live server, it's apparent that the code on the save_image.php script is faulty.

I would be really grateful if anyone could please have a look at in particular the save_image php script and give some advice as to what is wrong and make suggestions as to how how to fix it so that a manipulated image could be saved to a user's local machine.

Many thanks!
Was This Post Helpful? 0
  • +
  • -

#7 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,139
  • Joined: 08-August 08

Re: image manipulation program works on localhost but not on actual server

Posted 04 October 2012 - 05:31 AM

How is it not working? What error are you seeing? Details matter.
Was This Post Helpful? 0
  • +
  • -

#8 conrad101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 14-November 11

Re: image manipulation program works on localhost but not on actual server

Posted 04 October 2012 - 07:31 AM

Sorry CTphpnweb!

Ok, what happens is that I don't really get an error message but with the image ready to save; the GUI screen (which is attached as a screen capture) will have the appropriate save buttons and when either are clicked on, I just get a completly blank screen but in the URL box I will get the static IP address followed by "/save_image.php". I don't really have anything more concrete to go on.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#9 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,139
  • Joined: 08-August 08

Re: image manipulation program works on localhost but not on actual server

Posted 04 October 2012 - 07:54 AM

I'm guessing that save_image.php is not stored at your web site's root level.
Was This Post Helpful? 0
  • +
  • -

#10 conrad101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 14-November 11

Re: image manipulation program works on localhost but not on actual server

Posted 04 October 2012 - 08:16 AM

Ok so the save_image.PHP file should be at /var/www on the ubuntu instance running apache, It's worth checking again that it's there. Do you think then it is very likely to be another server configuration issue rather than a fault with the actual code?

Many thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1