De PHPhulp kroeg
imagecopyresampled werkt nog niet optimaal.
Ik heb een vraagje over mij php script. Ik wil op mijn website de mogelijkheid aanbieden dat bezoekers hun profielfoto kunnen uploaden. Hierbij wil ik dat bezoekers hun foto kunnen snijden uit een (te) grote foto.
Het volgende javascript gebruik ik om de snijvlakte te bepalen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
alert(x_axis);
alert(x2_axis);
alert(y_axis);
alert(y2_axis);
alert(thumb_width);
alert(thumb_height);
if(thumb_width > 0)
{
if(confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
//$("#photoimg").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '2.25:1',
onSelectEnd: getSizes
});
});
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
alert(x_axis);
alert(x2_axis);
alert(y_axis);
alert(y2_axis);
alert(thumb_width);
alert(thumb_height);
if(thumb_width > 0)
{
if(confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
//$("#photoimg").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '2.25:1',
onSelectEnd: getSizes
});
});
Nu wil ik dit gaan verwerken en doe dit in het volgende php script
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
require_once 'db.php';
$nummer_project = 1;
$basic_width = $_SESSION['basic_width'];
$basic_height = $_SESSION['basic_height'];
$t_width = 450; // thumbnail width
$t_height = (($t_width/$basic_width)*$basic_height); // thumbnail height
$ratio_x = $t_width / $basic_width;
$ratio_y = $t_height / $basic_height;
$new_name = "header".$nummer_project.".jpg"; // Thumbnail image name
$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
extract($_GET);
$snijden_vanaf_x = ceil($x1 * $ratio_x);
$snijden_vanaf_y = ceil($y1 * $ratio_y);
$snijlengte_x = ceil($w * $ratio_x);
$snijlengte_y = ceil($h * $ratio_y);
$nimg = imagecreatetruecolor($snijlengte_x,$snijlengte_y);
$im_src = imagecreatefromjpeg($path.$img);
imagecopyresampled($nimg,$im_src,0,0,$snijden_vanaf_x,$snijden_vanaf_y,980,435,$snijlengte_x,$snijlengte_y);
imagejpeg($nimg,$path.$new_name,100);
echo $new_name;
exit;
}
?>
require_once 'db.php';
$nummer_project = 1;
$basic_width = $_SESSION['basic_width'];
$basic_height = $_SESSION['basic_height'];
$t_width = 450; // thumbnail width
$t_height = (($t_width/$basic_width)*$basic_height); // thumbnail height
$ratio_x = $t_width / $basic_width;
$ratio_y = $t_height / $basic_height;
$new_name = "header".$nummer_project.".jpg"; // Thumbnail image name
$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
extract($_GET);
$snijden_vanaf_x = ceil($x1 * $ratio_x);
$snijden_vanaf_y = ceil($y1 * $ratio_y);
$snijlengte_x = ceil($w * $ratio_x);
$snijlengte_y = ceil($h * $ratio_y);
$nimg = imagecreatetruecolor($snijlengte_x,$snijlengte_y);
$im_src = imagecreatefromjpeg($path.$img);
imagecopyresampled($nimg,$im_src,0,0,$snijden_vanaf_x,$snijden_vanaf_y,980,435,$snijlengte_x,$snijlengte_y);
imagejpeg($nimg,$path.$new_name,100);
echo $new_name;
exit;
}
?>
Nu krijg ik wel de kleine foto alleen deze is helemaal zwart. Weet iemand waar het dan fout (kan) gaan?
Als er meer toelichting nodig is hoor ik dit graag!
Alvast bedankt!
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.[/modedit]
Gewijzigd op 18/12/2013 11:57:36 door Martijn Zant
lijn 28: $("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
Ik veronderstel dat je die wuploads op lijn 17 moet veranderen naar uploads
-----
De error die je klrijgt, is dat imagecreatefromjpeg het pad $path.$img niet kan vinden.
Gewijzigd op 18/12/2013 11:23:40 door Kris Peeters
Echter is die w een klein foutje dat door het weghalen van de hele link komt.
Oorspronkelijk staat de w er niet.
Wat zou verder de fout kunnen zijn dat ik een zwarte afbeelding krijg?
Maar het lijkt me dat de berekening niet klopt.
Wanneer de berekening getallen levert die buiten de grenzen van de image komen, ontstaat de fout.
$snijden_vanaf_x en $snijden_vanaf_y hebben niets te maken met de ratio. Die gegevens zijn het punt (x, y) van de source. Dus gewoon de top en left waar de gebruiker de cursor zet als eerste punt.
Die variabelen moet je anders noemen. Zorg dat bij elke variabele duidelijk is of het eindresultaat een source of destination waarde is. Nu is het verwarrend.
----
- Vertel eens wat die vaste waarden zijn. 450; 980; 435
- $_SESSION['basic_width'] en $_SESSION['basic_height'] worden bij het uploaden gevuld zeker? Wat voor waarden zijn dat?
Vergeet niet dat bovenaan ajax_image.php session_start() moet staan.
elk verzoek moet beginnen met session_start(); ook ajax verzoeken
Gewijzigd op 18/12/2013 12:20:23 door Kris Peeters
Wederom bedankt voor je reactie. Even ter toelichting. Dat ratio zit er in vanwege het volgende proces wat doorlopen wordt:
1) User upload foto
2) De foto wordt verkleint weergegeven met een maximale breedte van 450 px.
3) De user kan in deze foto snijden en verzenden
4) het gesneden gedeelte moet naar ratio worden gesneden uit de oorspronkelijke foto.
5) de nieuwe gesneden foto is nu te zien. (deze foto zal later worden gebruikt als header foto met een breedtje en hoogte van 980 x 435
Zelf heb ik de berekeningen bekeken en denk ik dat het goed is maar ik zal hier nog eens naar kijken.
Eventuele tips over het hierboven beschreven proces zijn welkom natuurlijk .
Gewijzigd op 18/12/2013 13:01:37 door Martijn Zant
Daar moet je al op controleren.
En dan nog moet zien dat de gebruiker een selectie maakt die groter is dan dat.
----
Wacht even. Je verkleint eerst naar 450px; daarna wil je er iets uit snijden dat veel groter is dan dat.
Dat is niet de bedoeling.
Gewijzigd op 18/12/2013 13:54:00 door Kris Peeters
Vervolgens bij het snijden zal de afbeelding verkleint worden weergegeven.
Vandaar dat ik het ratio bereken hoeveel de afbeelding verkleint is weergegeven. Vervolgens gebruik ik dit ratio om de uiteindelijk snijgrootte te berekenen.
Ik hoop dat dit kan?
Extra bestanden: "jquery.min.js", "imgareaselect-default.css", "imgAreaSelect.js"
(controleer of die juist staan, op lijn 7, 8, 9 van mijn code)
De image bevindt zich ook al in de map uploads, bij mij met de naam "a75oeGx_700b_v1.jpg" (geplukt van 9gag, zie de volledige src van de <img>).
Zorg dat de image (die jij wil gebruiken) overeenkomt met de gegevens in de <img> en in de <input>.
Alles wat niet belangrijk of nodig is voor mij, heb ik weggelaten. Eventueel heb jij die wel nog nodig.
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
session_start();
?>
<input id="image_name" value="a75oeGx_700b_v1.jpg"><br>
<img id="photo" src="http://d24w6bsrhbeh9d.cloudfront.net/photo/a75oeGx_700b_v1.jpg">
<span id="thumbs"></span>
<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imgAreaSelect.js"></script>
<script>
function getSizes(im, obj) {
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(1) // confirm("Do you want to save image..!")
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax",
data: { // object notatie van data die we mee sturen
img: $("#image_name").val(),
w: thumb_width,
h: thumb_height,
x1: x_axis,
y1: y_axis
},
cache:false,
success:function(rsponse) {
//$("#photoimg").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/" + rsponse + "' style='max-width:450px'/>");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '2.25:1',
onSelectEnd: getSizes
});
});
</script>
session_start();
?>
<input id="image_name" value="a75oeGx_700b_v1.jpg"><br>
<img id="photo" src="http://d24w6bsrhbeh9d.cloudfront.net/photo/a75oeGx_700b_v1.jpg">
<span id="thumbs"></span>
<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imgAreaSelect.js"></script>
<script>
function getSizes(im, obj) {
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(1) // confirm("Do you want to save image..!")
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax",
data: { // object notatie van data die we mee sturen
img: $("#image_name").val(),
w: thumb_width,
h: thumb_height,
x1: x_axis,
y1: y_axis
},
cache:false,
success:function(rsponse) {
//$("#photoimg").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/" + rsponse + "' style='max-width:450px'/>");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '2.25:1',
onSelectEnd: getSizes
});
});
</script>
ajax_image.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
session_start(); // niet vergeten! elk verzoek moet beginnen met session_start(); ook ajax verzoeken
if(isset($_GET['t']) and $_GET['t'] == "ajax") {
// options:
$path = "uploads/";
$dest_w = 980;
$dest_h = 435;
$dest_filename = 'header1.jpg';
// source gegevens lezen
$source = $path . $_GET['img'];
list($src_w, $src_h, $type, $attr) = getimagesize($source);
$crop = array(
'x' => $_GET['x1'],
'y' => $_GET['y1'],
'w' => $_GET['w'],
'h' => $_GET['h']
);
// we forceren de destination width en height naar vaste waarden
$nimg = imagecreatetruecolor($dest_w, $dest_h);
$im_src = imagecreatefromjpeg($source);
$okay = imagecopyresampled(
$nimg, // resource $dst_image
$im_src, // resource $src_image
0, // int $dst_x
0, // int $dst_y
$crop['x'], // int $src_x
$crop['y'], // int $src_y
$dest_w, // int $dst_w
$dest_h, // int $dst_h
$crop['w'], // int $src_w
$crop['h'] // int $src_h
);
imagejpeg($nimg, $path.$dest_filename, 100);
echo $dest_filename;
exit;
}
?>
session_start(); // niet vergeten! elk verzoek moet beginnen met session_start(); ook ajax verzoeken
if(isset($_GET['t']) and $_GET['t'] == "ajax") {
// options:
$path = "uploads/";
$dest_w = 980;
$dest_h = 435;
$dest_filename = 'header1.jpg';
// source gegevens lezen
$source = $path . $_GET['img'];
list($src_w, $src_h, $type, $attr) = getimagesize($source);
$crop = array(
'x' => $_GET['x1'],
'y' => $_GET['y1'],
'w' => $_GET['w'],
'h' => $_GET['h']
);
// we forceren de destination width en height naar vaste waarden
$nimg = imagecreatetruecolor($dest_w, $dest_h);
$im_src = imagecreatefromjpeg($source);
$okay = imagecopyresampled(
$nimg, // resource $dst_image
$im_src, // resource $src_image
0, // int $dst_x
0, // int $dst_y
$crop['x'], // int $src_x
$crop['y'], // int $src_y
$dest_w, // int $dst_w
$dest_h, // int $dst_h
$crop['w'], // int $src_w
$crop['h'] // int $src_h
);
imagejpeg($nimg, $path.$dest_filename, 100);
echo $dest_filename;
exit;
}
?>
Moraal:
Je hebt die ratio-berekeningen niet nodig.
De destination width en height worden geforceerd in imagecopyresampled();
de source gegevens moeten al helemaal geen ration meekrijgen bij het lezen van de gegevens. imagecopyresampled rekent dat zelf juist uit.
Wat die sessie betreft ... daar weet ik niet echt wat je van plan bent, en wat het in dit stuk code betekent.
Ik doe er niets mee.
Maar het punt is: als je sessie-gegevens in de Ajax call nodig hebt, moet je de Ajax call ook beginnen met session_start().
Was dit de bedoeling?
Gewijzigd op 18/12/2013 14:52:38 door Kris Peeters
Thanks!
Die ratio voor de source kan eventueel wel nodig zijn in de berekening, indien de image (waar de gebruiker in moet snijden) verkleind in beeld komt.
Dus als je met css #photo verkleint.
Nu ja, dat lukt je wel.
Ik heb het geprobeerd alleen ik krijg nog steeds een zwarte afbeelding als resultaat.
Ik mis volgens mij echt iets heel kleins...
Maar wat?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
session_start();
$nummer_project = 5;
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
// Options
$path = "uploads/";
$dest_w = 980;
$dest_h = 435;
$dest_filename = "header".$nummer_project.".jpg"; // Thumbnail image name
// Source gegevens lezen
$source = $path . $_GET['img'];
list($src_w, $src_h, $type, $attr) = getimagesize($source);
$t_width = 450; // thumbnail width
$t_height = (($t_width/$basic_width)*$basic_height); // thumbnail height
$ratio_x = $t_width / $src_w;
$ratio_y = $t_height / $src_h;
$crop = array(
'x' => ($_GET['x1'] * $ratio_x),
'y' => ($_GET['y1'] * $ratio_y),
'w' => ($_GET['w'] * $ratio_x),
'h' => ($_GET['h'] * $ratio_y)
);
// we forceren de destination width en height naar vaste waarden
$nimg = imagecreatetruecolor($dest_w,$dest_y);
$im_src = imagecreatefromjpeg($source);
$oke = imagecopyresampled(
$nimg,
$im_src,
0,
0,
$crop['x'],
$crop['y'],
$dest_w,
$dest_h,
$crop['w'],
$crop['h']
);
imagejpeg($nimg,$path.$dest_filename,100);
echo $dest_filename;
exit;
}
?>
session_start();
$nummer_project = 5;
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
// Options
$path = "uploads/";
$dest_w = 980;
$dest_h = 435;
$dest_filename = "header".$nummer_project.".jpg"; // Thumbnail image name
// Source gegevens lezen
$source = $path . $_GET['img'];
list($src_w, $src_h, $type, $attr) = getimagesize($source);
$t_width = 450; // thumbnail width
$t_height = (($t_width/$basic_width)*$basic_height); // thumbnail height
$ratio_x = $t_width / $src_w;
$ratio_y = $t_height / $src_h;
$crop = array(
'x' => ($_GET['x1'] * $ratio_x),
'y' => ($_GET['y1'] * $ratio_y),
'w' => ($_GET['w'] * $ratio_x),
'h' => ($_GET['h'] * $ratio_y)
);
// we forceren de destination width en height naar vaste waarden
$nimg = imagecreatetruecolor($dest_w,$dest_y);
$im_src = imagecreatefromjpeg($source);
$oke = imagecopyresampled(
$nimg,
$im_src,
0,
0,
$crop['x'],
$crop['y'],
$dest_w,
$dest_h,
$crop['w'],
$crop['h']
);
imagejpeg($nimg,$path.$dest_filename,100);
echo $dest_filename;
exit;
}
?>
Eventueel een copy/paste van de paginabron of zo.
Met ten minste
- alle elementen die jQuery aanspreekt
- met de css van de image waar de gebruiker in snijdt.
Gewijzigd op 20/12/2013 15:57:10 door Kris Peeters
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../../_css/cms.css" media="screen" />
<title>test</title>
</head>
<body>
<!--B.o.f. navTop-->
<div id="navTop">
<div class="wrap">
Welkom <span style="color:#1958bd"></span>
</div>
</div>
<!--E.o.f. navTop-->
<div class="wrap" style="margin-top:10px;">
<div id="adminMenu">
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><a style="padding-left:50px" href="/">Dashboard</a></li>
<li class="nav-button-project"><a style="padding-left:45px" href="#">Projecten</a></li>
<li class="nav-button-statistics"><a style="padding-left:40px;" href="#">Mijn statistieken</a></li>
</ul>
</nav>
</div>
<div id="mainContent">
<div id="pageName">
<div id="iconHome" class="addProject">Project toevoegen</div></div>
<div class="hr"></div>
<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(1)//confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
//$("#photoimg").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '2.25:1',
onSelectEnd: getSizes
});
});
</script>
<form id="cropimage" method="POST" name="header_submit" enctype="multipart/form-data">
<table width="940" border="1" cellspacing="0" cellpadding="0" class="regTable">
<tr>
<td colspan="2"><h2><span>1</span>:Voeg een header foto toe.</h2></td>
</tr>
<tr>
<td><input type="file" name="photoimg" id="photoimg" />
<input type="hidden" name="image_name" id="image_name" value="" /> * </br>
</td>
<td><input class="save"type="submit" name="header_submit" value="Header Foto Uploaden"/> </td>
</tr>
<tr>
<div style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div id="thumbs" style="padding:5px;"></div>
<div style="width:600px">
</tr>
</table>
<div class="hr"></div>
</form>
<form action="" method="POST" name="project_toevoegen" enctype="multipart/form-data">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../../_css/cms.css" media="screen" />
<title>test</title>
</head>
<body>
<!--B.o.f. navTop-->
<div id="navTop">
<div class="wrap">
Welkom <span style="color:#1958bd"></span>
</div>
</div>
<!--E.o.f. navTop-->
<div class="wrap" style="margin-top:10px;">
<div id="adminMenu">
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><a style="padding-left:50px" href="/">Dashboard</a></li>
<li class="nav-button-project"><a style="padding-left:45px" href="#">Projecten</a></li>
<li class="nav-button-statistics"><a style="padding-left:40px;" href="#">Mijn statistieken</a></li>
</ul>
</nav>
</div>
<div id="mainContent">
<div id="pageName">
<div id="iconHome" class="addProject">Project toevoegen</div></div>
<div class="hr"></div>
<link rel="stylesheet" type="text/css" href="imgareaselect-default.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(1)//confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
//$("#photoimg").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' style='max-width:450px'/>");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '2.25:1',
onSelectEnd: getSizes
});
});
</script>
<form id="cropimage" method="POST" name="header_submit" enctype="multipart/form-data">
<table width="940" border="1" cellspacing="0" cellpadding="0" class="regTable">
<tr>
<td colspan="2"><h2><span>1</span>:Voeg een header foto toe.</h2></td>
</tr>
<tr>
<td><input type="file" name="photoimg" id="photoimg" />
<input type="hidden" name="image_name" id="image_name" value="" /> * </br>
</td>
<td><input class="save"type="submit" name="header_submit" value="Header Foto Uploaden"/> </td>
</tr>
<tr>
<div style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div id="thumbs" style="padding:5px;"></div>
<div style="width:600px">
</tr>
</table>
<div class="hr"></div>
</form>
<form action="" method="POST" name="project_toevoegen" enctype="multipart/form-data">
En hier de css van default snijden
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
* imgAreaSelect default style
*/
.imgareaselect-border1 {
background: url(border-v.gif) repeat-y left top;
}
.imgareaselect-border2 {
background: url(border-h.gif) repeat-x left top;
}
.imgareaselect-border3 {
background: url(border-v.gif) repeat-y right top;
}
.imgareaselect-border4 {
background: url(border-h.gif) repeat-x left bottom;
}
.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-outer {
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-selection {
}
* imgAreaSelect default style
*/
.imgareaselect-border1 {
background: url(border-v.gif) repeat-y left top;
}
.imgareaselect-border2 {
background: url(border-h.gif) repeat-x left top;
}
.imgareaselect-border3 {
background: url(border-v.gif) repeat-y right top;
}
.imgareaselect-border4 {
background: url(border-h.gif) repeat-x left bottom;
}
.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-outer {
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-selection {
}
Gewijzigd op 20/12/2013 16:14:56 door Martijn Zant