ImageAreaSelect Uitsnijdscript
Ben bezig met een uitsnijdscript, heb al een user interface van ImageAreaSelect.
www.odyniec.net/projects/imgareaselect
D.m.v. een javascript vraag ik de coordinaten, en maten op van de afbeelding en waar er uitgesneden wordt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function maatjes () {
$('img#cropje').imgAreaSelect({
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
$('input[name="w"]').val(selection.width); //width
$('input[name="h"]').val(selection.height); //height
}
});
$('img#cropje').imgAreaSelect({
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
$('input[name="w"]').val(selection.width); //width
$('input[name="h"]').val(selection.height); //height
}
});
Alles word vervolgens in een sessie opgeslagen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$_SESSION['x1']= $_POST['x1'];
$_SESSION['y1']= $_POST['y1'];
$_SESSION['x2']= $_POST['x2'];
$_SESSION['y2']= $_POST['y2'];
$_SESSION['w']= $_POST['w'];
$_SESSION['h']= $_POST['h'];
$_SESSION['y1']= $_POST['y1'];
$_SESSION['x2']= $_POST['x2'];
$_SESSION['y2']= $_POST['y2'];
$_SESSION['w']= $_POST['w'];
$_SESSION['h']= $_POST['h'];
Alleen de php klopt nog niet, ik krijg namelijk een zwarte rand.
Nadat er op een knop word gedrukt, zou het goed uitgevoerd moeten worden.
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
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
if(isset($_POST['crop_submit'])){
print_r($_SESSION);
// File and new size
$filename = "content/$_SESSION[bron]";
$percent = 0.9;
// Content type
//header('Content-Type: image/jpeg');
// Get new sizes
list($width, $height) = getimagesize($filename);
$xpunt = $_SESSION['x1']; //10
//...of $xpunt = x coordinaat uit de javascript snijder
$ypunt = $_SESSION['y1']; //100
//... of $ypunt = y coordinaat uit de javascript snijder
$nwbreedte = $_SESSION['w']; // $width*$percent; Dacht eerst optellen X1,X2
//...of $nwbreedte = breedte van de afbeelding uit de javascript snijder...
$nwhoogte = $_SESSION['h']; // $height*$percent; Dacht eerst optellen Y1, Y2
//...of $nwhoogte = hoogte van de afbeelding uit de javascript snijder...
// Load
//lijstje
$thumb = imagecreatetruecolor($nwbreedte, $nwhoogte);//($nwbreedte-$xpunt, $nwhoogte-$ypunt)
$source = imagecreatefromjpeg($filename);
// Resize
imagecopyresampled($thumb, $source,0,0,$xpunt, $ypunt, $nwbreedte, $nwhoogte, $width, $height);
// Output
//en dan moet de afbeelding ook nog een naam hebben...
imagejpeg($thumb,$filename, 100);
imagedestroy($thumb);
imagedestroy($source);
echo "<IMG SRC='content/".$_SESSION['bron']."' ALT='Boek' >";
echo "</br>";
echo ' <input class="knop" type="button" value="Nieuw" onclick=document.location=("cms_nieuw.php") />';
}
print_r($_SESSION);
// File and new size
$filename = "content/$_SESSION[bron]";
$percent = 0.9;
// Content type
//header('Content-Type: image/jpeg');
// Get new sizes
list($width, $height) = getimagesize($filename);
$xpunt = $_SESSION['x1']; //10
//...of $xpunt = x coordinaat uit de javascript snijder
$ypunt = $_SESSION['y1']; //100
//... of $ypunt = y coordinaat uit de javascript snijder
$nwbreedte = $_SESSION['w']; // $width*$percent; Dacht eerst optellen X1,X2
//...of $nwbreedte = breedte van de afbeelding uit de javascript snijder...
$nwhoogte = $_SESSION['h']; // $height*$percent; Dacht eerst optellen Y1, Y2
//...of $nwhoogte = hoogte van de afbeelding uit de javascript snijder...
// Load
//lijstje
$thumb = imagecreatetruecolor($nwbreedte, $nwhoogte);//($nwbreedte-$xpunt, $nwhoogte-$ypunt)
$source = imagecreatefromjpeg($filename);
// Resize
imagecopyresampled($thumb, $source,0,0,$xpunt, $ypunt, $nwbreedte, $nwhoogte, $width, $height);
// Output
//en dan moet de afbeelding ook nog een naam hebben...
imagejpeg($thumb,$filename, 100);
imagedestroy($thumb);
imagedestroy($source);
echo "<IMG SRC='content/".$_SESSION['bron']."' ALT='Boek' >";
echo "</br>";
echo ' <input class="knop" type="button" value="Nieuw" onclick=document.location=("cms_nieuw.php") />';
}
Dus de afbeeldingen is wel mooi een vierkant geworden, alleen ik krijg een zwarte rand en de afbeelding is raar opgetrokken. Er is ook niet geluisterd naar het punt van uitsnijden.
Weet iemand wat ik misschien fout doet?
Groet,
Jeroen.
Gewijzigd op 14/05/2012 15:12:10 door Jeroen Steen
Gewijzigd op 14/05/2012 15:10:51 door gerhard l