Page 1 of 1

Display image at original page

Posted: Wed Jul 11, 2007 4:37 am
by svein
Hi
Beeing a total novice when it comes to programming, I have a small problem with displaying an image.

I have been using a script from http://www.phpit.net/article/image-mani ... -gd-part2/ to make my own image resizer.

It all works fine, except I want the picture to be displayed on the same page as the form, in a “div” a “td” a iframe or something, not on a new blank side.

Can this be done with som smart code?

Sorry if I am asking for something that's already been discussed, but I could not find such a topic

:(

Svein

Posted: Wed Jul 11, 2007 8:01 am
by Zoxive
Depending on how you wrote the script you can just call it like a normal image.

Code: Select all

<img src="image.php" width="150" height="100">
or

Code: Select all

<img src="image.php?name=flower.jpg" width="150" height="100">

Thank, but no..

Posted: Wed Jul 11, 2007 8:10 am
by svein
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


As mentioned I am not much of a programmer and have therefor cut and pasted my code form a tutorial. The code looks like this:

Code: Select all

<?php

if ($_POST) {

	 // print "<pre>";print_r($_FILES);print"</pre>";

        // No image?
        if (empty($_FILES['image']) OR $_FILES['image']['error'] != UPLOAD_ERR_OK) {
				die(header("Location:imageresizer.php?error=1"));
        }

        $imagepath = $_FILES['image']['tmp_name'];

		// Opening any kind of image
		function open_image ($file) {
        # JPEG:
        $im = @imagecreatefromjpeg($file);
        if ($im !== false) { return $im; }

        # GIF:
        $im = @imagecreatefromgif($file);
        if ($im !== false) { return $im; }

        # PNG:
        $im = @imagecreatefrompng($file);
        if ($im !== false) { return $im; }

        # GD File:
        $im = @imagecreatefromgd($file);
        if ($im !== false) { return $im; }

        # GD2 File:
        $im = @imagecreatefromgd2($file);
        if ($im !== false) { return $im; }

        # WBMP:
        $im = @imagecreatefromwbmp($file);
        if ($im !== false) { return $im; }

        # XBM:
        $im = @imagecreatefromxbm($file);
        if ($im !== false) { return $im; }

        # XPM:
        $im = @imagecreatefromxpm($file);
        if ($im !== false) { return $im; }

        # Try and load from string:
        $im = @imagecreatefromstring(file_get_contents($file));
        if ($im !== false) { return $im; }

        return false;
		}

        // Load image
        $image = open_image($imagepath);

        if ($image == false) {
				die(header("Location:imageresizer.php?error=2"));
        }

        // TODO: resizing the image

		// Get original width and height
		$width = imagesx($image);
		$height = imagesy($image);

		// Percentage?
		if (!empty($_POST['percent']) AND is_numeric($_POST['percent'])) {
				$percent = floatval($_POST['percent']);
				$percent = $percent/100;

				$new_width = $width * $percent;
				$new_height = $height * $percent;

		// New width? Calculate new height
		} elseif (!empty($_POST['new_width']) AND is_numeric($_POST['new_width'])) {
				$new_width = floatval($_POST['new_width']);
				$new_height = $height * ($new_width/$width);

		// New height? Calculate new width
		} elseif (!empty($_POST['new_height']) AND is_numeric($_POST['new_height'])) {
				$new_height = floatval($_POST['new_height']);
				$new_width = $width * ($new_height/$height);

		/* New height and new width
		} elseif (!empty($_POST['height']) AND is_numeric($_POST['height']) AND !empty($_POST['width']) AND is_numeric($_POST['width'])) {
				$new_height = floatval($_POST['height']);
				$new_width = floatval($_POST['width']);
		*/

		}else {
				die(header("Location:imageresizer.php?error=3"));
		}

		// Resample
		$image_resized = imagecreatetruecolor($new_width, $new_height);
		imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

		// Display resized image
		//header('Content-type: image/jpeg; location: $PHP_SELF');
		//imagejpeg($image_resized, '../userfiles/image/'.$_FILES['image']['name']); // Laster opp fila med det lokale navn 
		//imagejpeg($image_resized);	// Viser fila på skjerm
		//die();
	
}
?>
I am calling it from another php-page like you recomended, (<pre><img src='imageresizer.php' alt='' /></pre>) but only get a blank or red cross result.

I wonder if you would be nice and look into it for me?

Thanks again.

Svein


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Jul 11, 2007 8:13 am
by svein
I forgot to mention, but you can look at the output on

http://kompetansetjenester.no/websystem/imgresizer/

It's in Norwegian, but most of it is pretty right forward ...


Svein

Posted: Wed Jul 11, 2007 8:50 am
by Zoxive
In your Html on http://kompetansetjenester.no/websystem/imgresizer/, your form doesn't specify an action, meaning it isn't posting to imageresizer.php.

Code: Select all

<form method='POST' enctype='multipart/form-data' action="imageresizer.php">
Then it works, but all you see is the resized image.

Posted: Wed Jul 11, 2007 8:58 am
by svein
Yes. I've been there earlier. And it's not what I'm looking for, as you will understand from my first post. I want the image to be shown in the index-file, where the upload form is.

So that is still my problem ... :(

Svein

Posted: Wed Jul 11, 2007 9:03 am
by svein
I know I reach the imageresizer.php, because when I output the array content (as you can see now on my page), it changes evertime I'm choosing a new o\picture ... and there is no way that can be done axcept from inside imageresizer.php, is it?

The problem still remains; the picture will not appear .... :evil:

Svein

Posted: Wed Jul 11, 2007 9:35 am
by Zoxive
Are you just including imageresizer.php in index.php?

You should either save the image to the server temporally, or set the tmp filename to a session variable.

Code: Select all

<?php
session_start(); // start session

if ($_POST) {

// print "<pre>";print_r($_FILES);print"</pre>";

// No image?
if (empty($_FILES['image']) OR $_FILES['image']['error'] != UPLOAD_ERR_OK) {
die(header("Location:imageresizer.php?error=1"));
}

$imagepath = $_FILES['image']['tmp_name'];

// Opening any kind of image
function open_image ($file) {
# JPEG:
$im = @imagecreatefromjpeg($file);
if ($im !== false) { return $im; }

# GIF:
$im = @imagecreatefromgif($file);
if ($im !== false) { return $im; }

# PNG:
$im = @imagecreatefrompng($file);
if ($im !== false) { return $im; }

# GD File:
$im = @imagecreatefromgd($file);
if ($im !== false) { return $im; }

# GD2 File:
$im = @imagecreatefromgd2($file);
if ($im !== false) { return $im; }

# WBMP:
$im = @imagecreatefromwbmp($file);
if ($im !== false) { return $im; }

# XBM:
$im = @imagecreatefromxbm($file);
if ($im !== false) { return $im; }

# XPM:
$im = @imagecreatefromxpm($file);
if ($im !== false) { return $im; }

# Try and load from string:
$im = @imagecreatefromstring(file_get_contents($file));
if ($im !== false) { return $im; }

return false;
}

// Load image
$image = open_image($imagepath);

if ($image == false) {
die(header("Location:imageresizer.php?error=2"));
}

// TODO: resizing the image

// Get original width and height
$width = imagesx($image);
$height = imagesy($image);

// Percentage?
if (!empty($_POST['percent']) AND is_numeric($_POST['percent'])) {
$percent = floatval($_POST['percent']);
$percent = $percent/100;

$new_width = $width * $percent;
$new_height = $height * $percent;

// New width? Calculate new height
} elseif (!empty($_POST['new_width']) AND is_numeric($_POST['new_width'])) {
$new_width = floatval($_POST['new_width']);
$new_height = $height * ($new_width/$width);

// New height? Calculate new width
} elseif (!empty($_POST['new_height']) AND is_numeric($_POST['new_height'])) {
$new_height = floatval($_POST['new_height']);
$new_width = $width * ($new_height/$height);

/* New height and new width
} elseif (!empty($_POST['height']) AND is_numeric($_POST['height']) AND !empty($_POST['width']) AND is_numeric($_POST['width'])) {
$new_height = floatval($_POST['height']);
$new_width = floatval($_POST['width']);
*/

}else {
die(header("Location:imageresizer.php?error=3"));
}

// Set session varible
$_SESSION['pic_name'] = $imagepath;

// Resample
$image_resized = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);


// Display resized image
//header('Content-type: image/jpeg; location: $PHP_SELF');
//imagejpeg($image_resized, '../userfiles/image/'.$_FILES['image']['name']); // Laster opp fila med det lokale navn
//imagejpeg($image_resized); // Viser fila på skjerm
//die();

// If session is set show image
}elseif(isset($_SESSION['pic_name'])){
  $im     = imagecreatefromjpeg($_SESSION['pic_name']);
   imagepng($im);
   imagedestroy($im);
}
Maybe something like that, untested & sloppy.

Posted: Wed Jul 11, 2007 10:28 am
by svein
Still no picture, but maybee I don't know how to call your new variable from index.php?

I've tried:
<pre><img src='<? echo $im ?>' alt='' /></pre>
and
<pre><img src='imageresize.php' alt='' /></pre>
but no image ...

This might just be over my competance.

Any last suggestions?


Svein

Posted: Wed Jul 11, 2007 10:32 am
by Zoxive
Can you show us the code for index.php?

Posted: Wed Jul 11, 2007 10:35 am
by svein
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Code: Select all

<html>
	<head>
		<title>KomkartWeb Image Resizer</title>
		<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1 (Latin-1)'>
		<title>KompetanseTjenester</title>
		<link rel='stylesheet' type='text/css' href='../admin/admcss.css'>
				
        <style type='text/css'>
                th { text-align: right; padding-right: 6px;}
				/* td { padding-left: 6px;} */
				img {border: 0;}

				.error {background-color: #ffcccc;}
				.padding {padding-top: 12px; }
				.page-header {padding-left: 6px;}
        </style>
		
	</head>

    <body class='admtop' style='padding:8px 8px 0 0;'>
		<form method='POST' enctype='multipart/form-data' action='imageresizer.php'>

		<table width='100%' cellpadding='0' cellspacing='0' class='page-header tekst'>
		<tr height='80px'>
			<td width='50px' class='bunnbord' align='center'><img src='../bilder/resizer.gif' alt=''></td>
			<td class='bunnbord h1'>KomkartWeb Image Resizer</td>
		</tr>
		</table>

		<table width='100%' cellpadding='0' cellspacing='4px' class='padding tekst'>
		<tr>
			<td width='50%' valign='top' class='kvitbox'>
				<table width='100%' align='right' valign='top' class='tekst'>
					<tr height='80px'>
						<td width='50px' align='right'><img src='../bilder/resizer.gif' alt=''></td>
						<td class='h2'>KomkartWeb Image Resizer</td>
					</tr>

					<tr>
						<td colspan='2'>
							<table width='100%' cellpadding='3' align='center' valign='top' class='tekst'>
								<tr height='35px'>
									<th class='listestil' colspan='2'>Velg bilde</th>
									<td class='listestil'><input type='file' name='image' size='30'></td>
								</tr>

								<tr height='8px'><td></td></tr>

								<tr height='35px'>
									<td class='listestil' width='14px'>1</td>
									<th class='listestil' width='120px'>Endre størrelse til</th>
									<td class='listestil'><input type='text' name='percent' size='1' />% (prosent av original)</td>
								</tr>

								<tr height='35px'>
									<td class='listestil'>2</td>
									<th class='listestil'>ELLER ny bredde</th>
									<td class='listestil'><input type='text' name='new_width' size='1' /> pixels (høyden kalkuleres automatisk)</td>
								</tr>

								<tr height='35px'>
									<td class='listestil'>3</td>
									<th class='listestil'>ELLER ny høyde</th>
									<td class='listestil'><input type='text' name='new_height' size='1' /> pixels (bredden kalkuleres automatisk)</td>
								</tr>

								<!-- tr height='35px'>
									<td class='listestil'>4</td>
									<th class='listestil'>ELLER ny høyde og ny bredde</th>
									<td class='listestil'>
										<table class='boks tekst'>
											<tr><td>bredde:</td><td><input type='text' name='width' size='1' /> pixels</td></tr>
											<tr><td>høyde:</td><td><input type='text' name='height' size='1' /> pixels</td></tr>
										</table>
									</td>
								</tr -->
							</table>
						</td>
					</tr>

					<tr height='35px'><td colspan='3' style='text-align:center;'><input type='submit' value='Endre størrelsen på bildet' /></td></tr>
				</table>
			</td>
			<td valign='top' class='kvitbox'>
				<table width='100%' valign='top' class='tekst' border='0'>
					<tr height='82px'>
						<td class='h2'>Endre bildestørrelsen med KomkartWeb Image Resizer</td>
					</tr>
					<tr height='197px'>
						<td valign='top'>

						<?PHP
							if (!empty($_FILES['image']))
							{
							print "<pre>";print_r($_FILES);print"</pre>";

							echo"
								<pre><img src='imageresize.php' alt='' /></pre>
								<p>
								[Last inn i KomkartWeb]Upload / [Avbryt]Cancel
								";
							}else{
								echo"
								Ved hjelp av dette verktøyet kan du selv endre størrelsen på bilder du ønsker å benytte i KomkartWeb. 
								<p>
								<b>Bildene lagres automatisk på riktig plass i KomkartWeb slik at de kan benyttes direkte i editoren uten ekstra opplasting</b>.
								<p>
								Vær oppmerksom på at du kun skal benytte ett av alternativene (1, 2 eller 3) for å bestemme den nye størrelsen på bildet. <b>Valget med laveste nr overstyrer valg med høyere nr dersom du skriver inn verdier for flere valgalterantiver</b>.<p><br>";
							} // end if 

							switch($error)
							{
							case "1":
							echo"
								<table width='100%' cellpadding='12' cellspacing='0' class='box h3 error'>
									<tr>
										<td valign='top'><img src='../bilder/picture_error.png' alt='' border='0'></td>
										<td><strong>Ugyldig forsøk. (Har du valgt bilde?)</strong></td>
									</tr>
								</table>
								";
							break;

							case "2":
							echo"
								<table width='100%' cellpadding='12' cellspacing='0' class='box h3 error'>
									<tr>
										<td valign='top'><img src='../bilder/picture_error.png' alt='' border='0'></td>
										<td><strong>Du lastet opp et ugyldig bilde. Prøv på nytt.</strong></td>
									</tr>
								</table>
								";
							break;

							case "3":
							echo"
								<table width='100%' cellpadding='12' cellspacing='0' class='box h3 error'>
									<tr>
										<td valign='top'><img src='../bilder/picture_error.png' alt='' border='0'></td>
										<td><strong>Du må angi et alternativ for endring av størrelse.</strong></td>
									</tr>
								</table>
								";
							break;
							} // end switch error
							?>

						</td>
					</tr>
				</table>
			</td>
		</tr>

		</table>
		</form>

	</body>
</html>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Jul 11, 2007 10:37 am
by svein
I forgot to remove the action='imageresizer.php' in the Form-tag before posting it to you. I did this just to test it again.

Posted: Wed Jul 11, 2007 10:55 am
by Zoxive
svein wrote:I forgot to remove the action='imageresizer.php' in the Form-tag before posting it to you. I did this just to test it again.
Inorder to do what you want, you need to rewrite most of what you have, the reason being php can not output both text (html) and an image at once.

They have to be 2 separate requests, this is why i said to use something like image.php?name=keyboard.

You index.php file never does anything with the uploaded files, which is what imageresizer.php is for, but then imageresizer.php can only out put that image, it can't do both.


That being said, the easiest way i see for you to write this is to add an iframe were you want the image to be shown, and have

<form action="imageresizer.php" target="iframe_name" ...

Posted: Wed Jul 11, 2007 11:15 am
by svein
Great ...

That did the trick.

Thanks a lot, Zoxive

Next problem wil be to upload this image to a given url, but I got some pretty good clues on how to do that. ... Hope you don't mind me comming back if I experience any problems with that one too ...

:D

Svein

Posted: Thu Jul 12, 2007 4:24 am
by svein
Hi

I'm back with my next problem ...

Now my script works fine with previewing an image, resizing it and all that, but ..

I cant find a way to save the pic using a different button. Now the picture is automatically uploaded to the right subfolder and that might just be an ok solution, but I really wish to let the users first resize, then upload (not the other way around).

I might ad that the script eventually will be used in an app that needs logon and were all pics are supposed to be put in the same folder, so that's the easy part ...

I have no problems turning on and off save. But I (of course) have no clue of how to make a [Save]-button function.

Anyone??

Svein