Rogner une image, Recadrer une image avec JQuery ??? Comment Faire ??

Bonjour,

j'ai installé sur un site un petit carousel JCarousel qui récupère des images dans une base de données, j'ai rajouté un clique d'agrandissement sur les images avec une LightBox. Dans mon carousel il y a donc des images en portrait et en paysage.

Les photos qui sont dans la base de données sont "uploadée" dans un back-office et 2 images sont crées, une vignette 150px de largeur gardant le ratio et une image 800px de largeur pour le clique d'agrandissement.

Jusque là tout va bien, là où ça coince, c'est que pour mon carousel j'aurai voulu avoir des vignettes qui auraient toutes la même dimension, avant de de cliquer pour agrandir les photos.

Comment faire ça en JQuery (ou autre, PHP possible) ??? j'ai bien vu des truc du côté de JCrop, mais il sera beaucoup plus compliqué pour moi de corriger un script d'upload (que je ne maîtrise pas) que d'appliquer un petit script coupant des partie d'images pour créer une vignette.

Je suis preneur de toutes pistes !!
Merci
Modifié par beachattitude (06 Feb 2009 - 15:39)

Salut,

Le plus simple c'est de modifier ton script de création de vignette pour qu'il puisse recouper les images.

Dans ton script qui créer les vignettes il doit y avoir un fonction qui calcule le ratio, dans le cas d'un redimensionnement type "crop" tu n'as plus besoin de ce calcul de ratio par contre tu as besoin de calculer le décalage vertical et horizontal ainsi que hauteur et largeur en fonction de ce qui est coupé :

  $w = 150; //dimension a obtenir
  $h = 150;

  $img_width = ;//largeur de l'image d'origine
  $img_height = ;//hauteur de l'image d'origine
    
  $ratio=$img_width/$img_height;
  $inner_ratio=$w/$h;
  if($ratio>=$inner_ratio){
    $crop_h=$img_height;
    $crop_w=$img_height*$inner_ratio;
    $decal_h=0;
    $decal_w=($img_width-$crop_w)/2;
  }else{
    $crop_w=$img_width;
    $crop_h=$img_width/$inner_ratio;
    $decal_w=0;
    $decal_h=($img_height-$crop_h)/2;
  }
  imagecopyresampled($new_ressource, $resource, 0, 0, $decal_w, $decal_h, $w, $h, $crop_w, $crop_h);

Bonjour,

Je suis intéressé par ce probleme, j'aimerais faire exactement la même chose.
J'ai essayé de faire un script mais il me donne l'image vignette de la bonne taille mais toute noire.

Le bout de code ci-dessous est une modification de ma part au script uploadify de jquery.

$ext = pathinfo($name_file, PATHINFO_EXTENSION);
	
move_uploaded_file($tempFile,$targetFile);
vignette_crop($targetFile,$targetPath . $name_thumb,100,100,$ext);

function vignette_crop($img_src,$img_dest,$dst_w,$dst_h,$ext){
	// Lit les dimensions de l'image
	$size = getimagesize($img_src);  
	$src_w = $size[0]; 
	$src_h = $size[1];  
	
	$w = $dst_w; //dimension a obtenir
	$h = $dst_h;

	$img_width = $src_w;//largeur de l'image d'origine
	$img_height = $src_h;//hauteur de l'image d'origine

	$ratio=$img_width/$img_height;
	$inner_ratio=$w/$h;
	if($ratio>=$inner_ratio){
		$crop_h=$img_height;
		$crop_w=$img_height*$inner_ratio;
		$decal_h=0;
		$decal_w=($img_width-$crop_w)/2;
	}else{
		$crop_w=$img_width;
		$crop_h=$img_width/$inner_ratio;
		$decal_w=0;
		$decal_h=($img_height-$crop_h)/2;
	}

	// Crée une image vierge aux bonnes dimensions
	$dst_im = ImageCreateTrueColor($dst_w,$dst_h); 
	// Copie dedans l'image initiale redimensionnée
	if (($ext == "jpg") || ($ext == "jpeg")) {
		$src_im = imagecreatefromjpeg($img_src);
	}
	if ($ext == "png") {
		$src_im = imagecreatefrompng($img_src);
	}
	imagecopyresampled($dst_im, $src_im, 0, 0, $decal_w, $decal_h, $crop_w, $crop_h, $src_w, $src_h);

	// Sauve la nouvelle image
	if (($ext == "jpg") || ($ext == "jpeg")) {
		imagejpeg($dst_im,$img_dest);
	}
	if ($ext == "png") {
		imagepng($dst_im,$img_dest);
	}
	// Détruis les tampons
	ImageDestroy($dst_im);  
	ImageDestroy($src_im);
}

Le code n'est pas allégé car j'ai modifié une ancienne fonction qui redimensionnait sans recadrer par le bout de code situé au post du dessus


Si quelqu'un sait m'aider assez rapidement, ce serait très gentil.
Merci d'avance.

Sujet déplacé car c'est à priori côté serveur, et non pas côté client, que l'on fera ce genre de chose.
(Je te conseille à la rigueur de modifier le titre de ton sujet.)

Hello,

À vue de nez, que vaut : move_uploaded_file($tempFile,$targetFile); ?

if(move_uploaded_file($tempFile,$targetFile)
	vignette_crop($targetFile,$targetPath . $name_thumb,100,100,$ext);
else
	die("erreur de traitement d'image");

bon code