Codenstuff.com: PHP and HTML Image Editor Contest *Closed*

alex6848
VIP - Donator

Posts: 201

Joined: Sat Jan 16, 2010 10:26 pm

PHP and HTML Image Editor Contest *Closed*
alex6848
Thu Jul 08, 2010 3:17 pm

PHP and HTML Image Editor Contest wahooo;

Even though I could not make the script work :( - Mandia Wins! clapper;

Details:
In this contest you will have to use PHP or HTML or a mix of those codes to create an image editor. Your goal is to create something like the online picture editor pic nik. You can use JQUERY and CSS for detail.

Posting:
When you post your contest entry you must include your source and a live web version of it.

Deadline:
You have until August 1st to submit your entry.

Prize:
The prize of this contest is partnership with my website and the source of my logo maker.

Happy Scripting! lmao;

Last edited by alex6848 on Wed Aug 04, 2010 1:23 pm, edited 2 times in total.

Free Facebook Page Likes - http://fbliker.tk/?ref=gillis

mandai
Coding God

Posts: 2585

Joined: Mon Apr 26, 2010 6:51 pm

Re: PHP and HTML Image Editor Contest
mandai
Sun Jul 11, 2010 10:04 pm

Using CSS/HTML/JavaScript I came up with this:

From what I can see this should work fine in IE8 and Firefox 3.6.

draw.php:

Code: Select all

<?php
$getcount = count($_GET);
if ($getcount > 7)
{
	$mode = $_GET["m"];

	$x = $_GET["x"];
	$y = $_GET["y"];
	$w = $_GET["w"];
	$h = $_GET["h"];

	$r = $_GET["r"];
	$g = $_GET["g"];
	$b = $_GET["b"];

	$image = imagecreatefrompng("image.png");
	$colour = imagecolorallocate($image, $r, $g, $b);

	if ($mode == 0)
	{
		imageline($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 1)
	{
		imagerectangle($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 2)
	{
		imageellipse($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 3)
	{
		imagefilledrectangle($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 4)
	{
		imagefilledellipse($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 5)
	{
		imagefill($image, $x, $y, $colour);
	}
	imagepng($image, "image.png"); //update stored image
	imagepng($image); //send image to client
	imagedestroy($image);
}
else
{
	echo "Not enough variables ($getcount/8)";
}
?>

index.htm:

Code: Select all

<!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" xml:lang="en">
<head>
<title>PHP paint</title>

<style type="text/css">
.bordered
{
	border-style: solid;
	border-width: 1px;
}

</style>
<script type="text/JavaScript">

function updateImage()
{
	var img = document.getElementById("img");
	var inputMode = document.getElementById("mode");
	var inputX = document.getElementById("x");
	var inputY = document.getElementById("y");
	var inputWidth = document.getElementById("w");
	var inputHeight = document.getElementById("h");
	var inputR = document.getElementById("r");
	var inputG = document.getElementById("g");
	var inputB = document.getElementById("b");

	img.src = "draw.php?m=" + inputMode.value + "&x=" + inputX.value + "&y=" + inputY.value + "&w=" + inputWidth.value + "&h=" + inputHeight.value + "&r=" + inputR.value + "&g=" + inputG.value + "&b=" + inputB.value;
}

var times = 0;

function imgClick()
{
	times += 1;
	if (times == 3)
	{
		times = 0;
	}
}

//below offsetX/Y values work in IE, whareas layerX/Y is for Firefox.
function imgMove(event)
{
	if (times == 0)
	{
		var inputX = document.getElementById("x");
		if (!event.layerY)
			inputX.value = event.offsetX;
		else
			inputX.value = event.layerX;

		var inputY = document.getElementById("y");
		if (!event.layerY)
			inputY.value = event.offsetY;
		else
			inputY.value = event.layerY;
	}
	else if (times == 1)
	{
		var inputWidth = document.getElementById("w");
		if (!event.layerY)
			inputWidth.value = event.offsetX;
		else
			inputWidth.value = event.layerX;

		var inputHeight = document.getElementById("h");
		if (!event.layerY)
			inputHeight.value = event.offsetY;
		else
			inputHeight.value = event.layerY;
	}
}

function tdR(event)
{
	var inputR = document.getElementById("r");
	if (!event.layerY)
		inputR.value = event.offsetY;
	else
		inputR.value = event.layerY;
}
function tdG(event)
{
	var inputG = document.getElementById("g");
	if (!event.layerY)
		inputG.value = event.offsetY;
	else
		inputG.value = event.layerY;
}
function tdB(event)
{
	var inputB = document.getElementById("b");
	if (!event.layerY)
		inputB.value = event.offsetY;
	else
		inputB.value = event.layerY;
}
</script>
</head>
<body>

<form action="draw.php" method="get">
<p>
<select id="mode" name="m">
<option value="0">Draw line</option>
<option value="1">Draw rectangle</option>
<option value="2">Draw ellipse</option>
<option value="3">Draw filled rectangle</option>
<option value="4">Draw filled ellipse</option>
<option value="5">Fill area</option>
</select>
</p>

<p>
X: <input id="x" type="text" value="20" name="x" />
Y: <input id="y" type="text" value="30" name="y" />
Width: <input id="w" type="text" value="40" name="w" />
Height: <input id="h" type="text" value="50" name="h" />
R: <input id="r" type="text" value="0" name="r" />
G: <input id="g" type="text" value="0" name="g" />
B: <input id="b" type="text" value="0" name="b" />
<input type="button" value="Make changes!" onclick="updateImage()" />
</p>

<!--
this would direct the user to the resulting image
<input type="submit" onclick="updateImage()" />
-->

</form>
<p><img id="img" style="position: absolute; left: 80px;" class="bordered" src="image.png" onclick="imgClick()" onmousemove="imgMove(event)" alt="" /></p>
<table>
<tr>
<td class="bordered" style="height: 255px; border-color: #FF0000; position: absolute; top: 115px;" onclick="tdR(event)">R</td>
<td class="bordered" style="height: 255px; border-color: #00FF00; position: absolute; left: 30px; top: 115px" onclick="tdG(event)">G</td>
<td class="bordered" style="height: 255px; border-color: #0000FF; position: absolute; left: 50px; top: 115px" onclick="tdB(event)">B</td>
</tr>
</table>
</body>
</html>

alex6848
VIP - Donator

Posts: 201

Joined: Sat Jan 16, 2010 10:26 pm

Re: PHP and HTML Image Editor Contest
alex6848
Tue Jul 13, 2010 2:59 pm

Hi mandai,
Thanks for your entry. lmao;
But I have one question. dunnno; Do I have to put image.png in the same folder because I can't figure out how to make the image appear this is what my screen looks like:

or in ie

Please post back.

Thanks Alex lmao;

Free Facebook Page Likes - http://fbliker.tk/?ref=gillis

Lewis
Coding God

Posts: 1564

Joined: Sun Dec 20, 2009 2:12 pm

Re: PHP and HTML Image Editor Contest
Lewis
Tue Jul 13, 2010 7:48 pm

Yes it is loading it from the same folder as you can see in the php

:
imagepng($image, "image.png"); //update stored image

if there is no directory set ex:
imagepng($image, "images/image.png");
then its in the same directory

alex6848
VIP - Donator

Posts: 201

Joined: Sat Jan 16, 2010 10:26 pm

Re: PHP and HTML Image Editor Contest
alex6848
Mon Jul 19, 2010 12:03 pm

what should image.png be like how large in dimentions or what colour.

Free Facebook Page Likes - http://fbliker.tk/?ref=gillis

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

Re: PHP and HTML Image Editor Contest
mikethedj4
Mon Jul 19, 2010 5:53 pm

I'd like to see the image editors in action on a website.

mandai
Coding God

Posts: 2585

Joined: Mon Apr 26, 2010 6:51 pm

Re: PHP and HTML Image Editor Contest
mandai
Mon Jul 19, 2010 6:19 pm

what should image.png be like

There are no limitations to the image size, you can also use a blank image or a pre-existing one.

Livengood
Serious Programmer

Posts: 444

Joined: Tue Feb 16, 2010 6:24 am

Re: PHP and HTML Image Editor Contest
Livengood
Wed Jul 21, 2010 6:47 am

mandai wrote:

Using CSS/HTML/JavaScript I came up with this:

From what I can see this should work fine in IE8 and Firefox 3.6.

draw.php:

Code: Select all

<?php
$getcount = count($_GET);
if ($getcount > 7)
{
	$mode = $_GET["m"];

	$x = $_GET["x"];
	$y = $_GET["y"];
	$w = $_GET["w"];
	$h = $_GET["h"];

	$r = $_GET["r"];
	$g = $_GET["g"];
	$b = $_GET["b"];

	$image = imagecreatefrompng("image.png");
	$colour = imagecolorallocate($image, $r, $g, $b);

	if ($mode == 0)
	{
		imageline($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 1)
	{
		imagerectangle($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 2)
	{
		imageellipse($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 3)
	{
		imagefilledrectangle($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 4)
	{
		imagefilledellipse($image, $x, $y, $w, $h, $colour);
	}
	else if ($mode == 5)
	{
		imagefill($image, $x, $y, $colour);
	}
	imagepng($image, "image.png"); //update stored image
	imagepng($image); //send image to client
	imagedestroy($image);
}
else
{
	echo "Not enough variables ($getcount/8)";
}
?>

index.htm:

Code: Select all

<!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" xml:lang="en">
<head>
<title>PHP paint</title>

<style type="text/css">
.bordered
{
	border-style: solid;
	border-width: 1px;
}

</style>
<script type="text/JavaScript">

function updateImage()
{
	var img = document.getElementById("img");
	var inputMode = document.getElementById("mode");
	var inputX = document.getElementById("x");
	var inputY = document.getElementById("y");
	var inputWidth = document.getElementById("w");
	var inputHeight = document.getElementById("h");
	var inputR = document.getElementById("r");
	var inputG = document.getElementById("g");
	var inputB = document.getElementById("b");

	img.src = "draw.php?m=" + inputMode.value + "&x=" + inputX.value + "&y=" + inputY.value + "&w=" + inputWidth.value + "&h=" + inputHeight.value + "&r=" + inputR.value + "&g=" + inputG.value + "&b=" + inputB.value;
}

var times = 0;

function imgClick()
{
	times += 1;
	if (times == 3)
	{
		times = 0;
	}
}

//below offsetX/Y values work in IE, whareas layerX/Y is for Firefox.
function imgMove(event)
{
	if (times == 0)
	{
		var inputX = document.getElementById("x");
		if (!event.layerY)
			inputX.value = event.offsetX;
		else
			inputX.value = event.layerX;

		var inputY = document.getElementById("y");
		if (!event.layerY)
			inputY.value = event.offsetY;
		else
			inputY.value = event.layerY;
	}
	else if (times == 1)
	{
		var inputWidth = document.getElementById("w");
		if (!event.layerY)
			inputWidth.value = event.offsetX;
		else
			inputWidth.value = event.layerX;

		var inputHeight = document.getElementById("h");
		if (!event.layerY)
			inputHeight.value = event.offsetY;
		else
			inputHeight.value = event.layerY;
	}
}

function tdR(event)
{
	var inputR = document.getElementById("r");
	if (!event.layerY)
		inputR.value = event.offsetY;
	else
		inputR.value = event.layerY;
}
function tdG(event)
{
	var inputG = document.getElementById("g");
	if (!event.layerY)
		inputG.value = event.offsetY;
	else
		inputG.value = event.layerY;
}
function tdB(event)
{
	var inputB = document.getElementById("b");
	if (!event.layerY)
		inputB.value = event.offsetY;
	else
		inputB.value = event.layerY;
}
</script>
</head>
<body>

<form action="draw.php" method="get">
<p>
<select id="mode" name="m">
<option value="0">Draw line</option>
<option value="1">Draw rectangle</option>
<option value="2">Draw ellipse</option>
<option value="3">Draw filled rectangle</option>
<option value="4">Draw filled ellipse</option>
<option value="5">Fill area</option>
</select>
</p>

<p>
X: <input id="x" type="text" value="20" name="x" />
Y: <input id="y" type="text" value="30" name="y" />
Width: <input id="w" type="text" value="40" name="w" />
Height: <input id="h" type="text" value="50" name="h" />
R: <input id="r" type="text" value="0" name="r" />
G: <input id="g" type="text" value="0" name="g" />
B: <input id="b" type="text" value="0" name="b" />
<input type="button" value="Make changes!" onclick="updateImage()" />
</p>

<!--
this would direct the user to the resulting image
<input type="submit" onclick="updateImage()" />
-->

</form>
<p><img id="img" style="position: absolute; left: 80px;" class="bordered" src="image.png" onclick="imgClick()" onmousemove="imgMove(event)" alt="" /></p>
<table>
<tr>
<td class="bordered" style="height: 255px; border-color: #FF0000; position: absolute; top: 115px;" onclick="tdR(event)">R</td>
<td class="bordered" style="height: 255px; border-color: #00FF00; position: absolute; left: 30px; top: 115px" onclick="tdG(event)">G</td>
<td class="bordered" style="height: 255px; border-color: #0000FF; position: absolute; left: 50px; top: 115px" onclick="tdB(event)">B</td>
</tr>
</table>
</body>
</html>

That looks sick

PHP and HTML Image Editor Contest Closed

alex6848

Information

Posts: 201

Joined: Sat Jan 16, 2010 10:26 pm
View Full Profile

mandai

Information

Posts: 2585

Joined: Mon Apr 26, 2010 6:51 pm
View Full Profile

alex6848

Information

Posts: 201

Joined: Sat Jan 16, 2010 10:26 pm
View Full Profile

Lewis

Information

Posts: 1564

Joined: Sun Dec 20, 2009 2:12 pm
View Full Profile

alex6848

Information

Posts: 201

Joined: Sat Jan 16, 2010 10:26 pm
View Full Profile

mikethedj4

Information

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am
View Full Profile

mandai

Information

Posts: 2585

Joined: Mon Apr 26, 2010 6:51 pm
View Full Profile

Livengood

Information

Posts: 444

Joined: Tue Feb 16, 2010 6:24 am
View Full Profile

Breadcrumbs

Copyright Information