Tronquer images à la volée

[pcamliti]

Bonjour,

je dois développer un site sur lequel il est nécessaire de tronquer une partie d'images chargées aléatoirement dans une base.

Je m'explique :
1. je charge les images à chaque reload, mais elles ne sont pas toujours dans le même ordre et à la même échelle.
2. elles sont par intermittence accrochée sur le coin supérieur droit, le coin supérieur gauche ou idem en bas.

Comme si les images étaient fixées dans un album photo, dont le coin passe sous la page... vous voyez ?

Si quelqu'un à une idée pour scripter ce masque temporaire.

Merci de votre aide :wink:

 

[zeb]

pas moyen de superposer une div par dessus l'image avec un background contenant l'image du coin blanc ?

ce serait plus soft que de générer du Jpg a la volée sur le serveur.

 

[e-kiwi]

ne genere pas ce tronquage à l affichage de l image, mais lorsqu'elle est chargée sur le serveur, comme ca l operation est faite une et une seule fois (si tu as assez d espace disque pour le faire). pour le reste, la librairie GD fera tres bien ce que tu souhaite

 

[zeb]

ne genere pas ce tronquage à l affichage de l image, mais lorsqu'elle est chargée sur le serveur, comme ca l operation est faite une et une seule fois (si tu as assez d espace disque pour le faire). pour le reste, la librairie GD fera tres bien ce que tu souhaite

s'il s'agit de positionner au choix l'image dans les 4 coins possibles, cela va faire 5 fois le volume disque ... c'est beaucoup

 

[pcamliti]

ne genere pas ce tronquage à l affichage de l image, mais lorsqu'elle est chargée sur le serveur, comme ca l operation est faite une et une seule fois (si tu as assez d espace disque pour le faire). pour le reste, la librairie GD fera tres bien ce que tu souhaite

s'il s'agit de positionner au choix l'image dans les 4 coins possibles, cela va faire 5 fois le volume disque ... c'est beaucoup

Oui si je peut limiter le volume ce n'est que mieux.
zeb tu positionnerai en absolute tes div ?

 

[e-kiwi]

a choisir, je prefere multiplier par 5 l espace disque image que par 5 la charge processeur pour recuperer la taille de l image pour placer le coin transparent sur l'image.

 

[pcamliti]

a choisir, je prefere multiplier par 5 l espace disque image que par 5 la charge processeur pour recuperer la taille de l image pour placer le coin transparent sur l'image.

Il faut voir, cela reste sur la home donc environ 15 images.... à aller piocher.

Pourriez (e-kiwi) me préciser votre idée.. svp :wink:

 

[zeb]

zeb tu positionnerai en absolute tes div ?

faux voir la page mais oui c'est à ça que je pense.

sinon tu dois tronquer les 4 coins de l'image et pas seulement 1 coin sur quatre images disposée en carré ?
peut tu montrer un exemple ?

 

[pcamliti]

Voici le concept de base :

http://www.camliti-architecte.com/images/images-web.jpg

 

[zeb]

pas simple, chaque reload va donner un truc différent, c'est pas une coupure régulière et tu as des milliers de possibilité de résultat.

Ça risque de coûter cher en ressource pour créer cela dynamiquement

 

[pcamliti]

Il vaut mieux découper les images à la base et les FTP tronquées ?
Existe t il une solution approchant plus simple ?

 

[zeb]

Il vaut mieux découper les images à la base et les FTP tronquées ?
Existe t il une solution approchant plus simple ?

d'après ce que je vois du projet, il va y avoir plusieurs découpes possible pour une même image ... (combien ?) si oui, tu va avoir un travail de fou pour toutes les préparer.


cela va dans le sens de la découpe a la volée mais encore une fois ... GD est cool pour ce travail mais quel travail ! tu as pas moyen de simplifier le projet ?

 

[pcamliti]

Si mais dans quelle mesure, il faut que je trouve la proportion qui me permettrai de générer qu'une en haut ou en bas.
Mais il faut que je connaisse au préalable la technique pour argumenter et préparer mon discours.
Afin qu'ils me valident le projet avant mise en prod.

 

[zeb]

a mon sens, je décompose le projet en deux problèmes différents qui correspondent a la structure de l'image globale.

tu as 4 lignes qui partent du pseudo soleil a gauche. pour les images comprises entres les rayons, c'est un problème minime, dans la mesure ou tu pourrait te contenter de modifier leur taille dynamiquement pour accrocher le coin supérieur ou inférieur GAUCHE (donc pas de troncage du coin).

Pour les images situées au dessus du rayon jaune ou en dessous du bleu, il faudrais accrocher le coin DROIT pour éviter encore une fois le problème du coin coupé.

au niveau argumentaire, il est facile de leur expliquer que ce type de manipe va mettre a genoux le serveur a chaque requête ou alors va générer un nombre immense d'images possible.

Soit dit en passant, si seulement, le fait de couper les miniature en biais n'étais pas un problème indispensable, et que les miniatures pouvait toutes recouvrir les ligne colorées (rayons) ce truc peut se faire en quelques lignes simples.

 

[zeb]

Çà c'est facile a réaliser (les coins ne sont pas tronqués)

 

[pcamliti]

Le but est de conserver la dynamique des lignes, je vais proposer de ne pas couper les images... mais j'imagine déjà leurs réponses.

zeb, comment positionneriez vous les images dans des div séparées ?

 

[zeb]

HTML

<div id="globale">
 <div id="img1">
  <img src="..." alt="...">
 </div>
 <div id="img2">
  <img src="..." alt="...">
 </div>
 <div id="img3">
  <img src="..." alt="...">
 </div>
</div>

CSS

#globale{
  position: absolute;
  left: ...px;
  top: ...px;
}

#img1{
  position: absolute;
  left: ...%;
  top: ...%;
}
#img1 img{
  width: ...%;
}
#img2{
  position: absolute;
  left: ...%;
  top: ...%;
}
#img2 img{
  width: ...%;
}
(...)

Sinon je suis en trains de regarder un truc sur GD qui est peut être la solution a ton problème, laisse moi qques minutes, le temps d'ouvrir la boite a neurones ;-)

 

[zeb]

bon j'ai bougé mes 4 neurones restants pendant qques minutes mais ils ne m'ont pas permis de trouver la solution idéale pour ton problème.

En revanche j'ai une solution a te proposer qui rejoint ma première idée de superposition d'images en html.

en voici un exemple : -http://www.agir19.free.fr/images/integration.php

le fond global est une image png avec des zones transparentes, l'image a faire apparaître en dessous est positionnée avec CSS et dimensionnée à l'avance.

 

[pcamliti]

oK MERCI beaucoup zeb, je vais utiliser cette méthode... qui me parait être la plus facile à mettre en œuvre.