[Løst] Hjelp med Jcrop

[Logitech1]

Hei.

 

Trenger litt hjelp med å implementere Jcrop på siden min.

 

Jeg har et skjema hvor man laster opp et bilde og man kan velge og bli sendt videre til "bæskjeringssiden" (jcrop) om man vil endre utsnittet på forside/forhåndsvisningsbildet.

 

Bildet blir lastet opp i en upload mappe og jeg lagrer urlen til bildet i en Session variabel kaldt "bilde1"

 

Om man så velger å beskjære bilde klikker man en link og blir sendt til bilde_crop.php

 

Jcrop koden er omtrent tatt rett fra eksempelet i Jcrop manualen, eneste er at dette skal være et 549 * 209 bilde så jeg setter regionen til det og aspectratioen til det også.

 

 

  <script language="Javascript">
 $(function()
 {

  $('#cropbox').Jcrop({
aspectRatio: 549 / 209,
bgOpacity: 0.5,
bgColor: 'black',
onSelect: updateCoords
  },function(){
  api = this;
  api.setSelect([0,0,549,209]);
  api.setOptions({ bgFade: true });
  api.ui.holder.removeClass('jcrop-light');
  api.ui.holder.addClass('jcrop-dark');
  api.setOptions({ bgColor: 'black', bgOpacity: 0.4 });
});

 });
 function updateCoords(c)
 {
   $('#x1').val(c.x);
   $('#y1').val(c.y);
   $('#x2').val(c.x2);
   $('#y2').val(c.y2);
$('#w').val(c.w);
   $('#h').val(c.h);
 };
 function checkCoords()
 {
  if (parseInt($('#w').val())) return true;
  alert('Du må velge et område å beskjære.');
  return false;
 };
 </script>

 

Som du ser har jeg lagt til et par ekstra kordinater x2 og y2 (men er tydelig at det ikke hjelper noe)

 

Så er det koden hvor det bildet du lastet opp blir lagt til og du kan beskjære det.

 

<div class='container'>
 <?php
 $src = $_SESSION['bilde1'];
 $src2 = explode("/",$src);
 $src3 = "liten_".$src2[1];

 $newfile = "upload/".$src3;

 copy($src, $newfile) or die("Feil under kopiering av $src til $newfile.");

 $_SESSION['bilde2'] = $newfile;

 echo "<img src='$src' id='cropbox' />"?>

 <form action="crop.php" method="post" onsubmit="return checkCoords();">
  <input type="text" id="x1" name="x1" />
  <input type="text" id="y1" name="y1" />
  <input type="text" id="x2" name="x2" />
  <input type="text" id="y2" name="y2" />
  <input type="text" id="w" name="w" />
  <input type="text" id="h" name="h" />
  <input type="submit" value="Lagre" />
 </form>
</div>

 

Her lager jeg en kopi av det orginale bildet og lager et nytt bildet med "liten_" forran og lastes opp i uploadmappen. Urlen til det bildet lagres i Session bilde2

Feltene er satt til text så jeg ser at det fungerer.

 

Så kjøres koden i filen crop.php som ser slik ut:

 

<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$session = $_SESSION['bilde2'];
$targ_w = 549;
$targ_h = 209;
$jpeg_quality = 90;
$img_r = imagecreatefromjpeg($session);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x2'],$_POST['y2'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
imagejpeg($dst_r, $session, $jpeg_quality);
echo "Bilde er oppdatert!";
echo "<br/>TEST: <br/><br/> <img src=".$session.">";
exit;
}
?>

 

Blir lang post dette, men håper noen kan hjelpe meg.

 

Mye av dette fungerer veldig bra, men det er akkurat det med at den lagrer riktig region som du har markert at det går noe galt.

 

Her er et par bilder ser dere enkelt hva som er feil.

 

Det jeg tror det kan ha noe mer er enten noe med at jeg setter aspectratioen, at jeg ikke sender med x1 og y1, har prøvd å endre i imagecopyresampled metoden og sende med de, bytte de etc uten hell

 

1.jpg - En side du blir sendt til etter at du har lastet opp bildet for å se over posten før den legges ut og om du evt vil beskjære bildet.

2.jpg - Bildet i sin orginale størelse og det kan endres etter behov. Størelsesforholdet er låst til 549 * 209 så det kan endres til slik som på bilde 3.jpg f.eks

 

og så kommer det som blir veldig galt som må være et eller annet med kordinatene den sender over for om jeg lagrer utsnittet fra 3.jpg blir det som i 4.jpg

 

Er jo ikke noe problem og gå tilbake og endre utsnittet igjen siden det er blitt lagret 2 forskjellige bildet så det er kun "liten_****" som blir oppdatert, mens kilden til bildet i beskjæringssiden fremdeles er orginalbildet.

 

Andre eksempler i 5-6 og 7-8

[kj_]

I crop.php, setter du jo en bestemt bredde og høyde, og ikke nødvendigvis den ratioen du har ønsker om å bruke. Ser jo derfor ut som at testbildet du laster opp har en relativt høy oppløsning, slik at bildet du får ut kun er en 549x209-crop fra et bestemt sted på det opprinnelige bildet

[Logitech1]

Hei.

 

Fikk løst dette til slutt. Var pga kode i css filen at oppløsningen på utklippet ble feil siden bildet blir lagt i en div som er satt til en viss høyde og bredde