Flouter des images

Version imprimable

Flouter des images

Bonjour à tous,

Je souhaite flouter des images que je récupère en base de données.

J'ai donc crée une extension twig mais cela ne fonctionne pas car j'utilise des fonctions php "imagejpeg()" et "imagefilter()" et j'ai besoin d'un header(content-type: image/jpeg) pour afficher ces images ce qui n'est possible dans un template.

Comment puis je faire pour flouter des images (sans utiliser de CSS) ?

Pour vous aider voici mon code :

Ma balise img dans ma vue twig :

Code:

<img class="img-thumbnail" src="{{src|flou}}" width="150px" height="150px" alt="..."/>

Mon extension twig :
Code:

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 <?php namespace monprojet\NotificationBundle\Twig; use Symfony\Component\HttpFoundation\Response; class TwigExtension extends \Twig_Extension { public function getFilters() { return array( new \Twig_SimpleFilter('flou', array($this, 'flouFilter')), ); } public function flouFilter($image) { $response = new Response(); $response->headers->set('Content-Type', 'image/jpeg'); $response->send(); $imageFlou = @imagecreatefromjpeg($image); imagejpeg($imageFlou); imagefilter($imageFlou, IMG_FILTER_GAUSSIAN_BLUR); imagedestroy($imageFlou); } public function getName() { return 'acme_extension'; } }

22/01/2015, 10h14
bilbot

Si tu compte faire beaucoup de traitement d'image, tu peux utiliser ce bundle : https://github.com/avalanche123/Imagine

Oulà, je ne suis pas sur d'avoir compris ce que tu veux mais ça m'a l'air un brin étrange.

Si tu ne veux pas utiliser de CSS c'est que l'image elle même doit être floue, et si l'image originale ne l'est pas, tu veux faire un traitement d'image, une copie en plus floue et afficher cette copie. Je ne dis pas de bêtise ?

Une possibilité serait de fournir une route interne à l'attribut src de ta balise img. C'est elle qui ferait tout le boulot d'édition de l'image, et elle te retournerait l'URL correspondant à une route qui se contente de t'afficher l'image (et qui pourrait du coup avoir le header que tu veux).

Pour faire court : voilà ce que je te suggère:

Code:

<img class="img-thumbnail" src="{{ path('route_to_blurred_img', {source: originalImgPath, height: 150, width: 150}) }}" width="150px" height="150px" alt="..."/>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 class ImageController { /** * Route 'route_to_blurred_img' */ public function blurImage($originalImgPath, $height, $width) { // Le path d'une image floutée aux dimensions données $blurredImagePath = "/path/to/blurred/$height/$width/image"; // Si tu enregistres les images tu n'auras à passer dans ce if qu'une seule fois par image/dimensions if (!$image = $this->fileManager->exists($blurredImagePath) { $image = $this->imageManager->blur($originalImgPath); $image = $this->imageManager->resize($image, $height, $width); $this->fileManager->save($image); } $response = new Response(); //... fais tout ce que t'as à faire avec tes headers ton image etc pour que ça te retourne bien juste l'image quand tu vas sur cette route return $response; } }
Deux services inclus dans le controller :
- un fileManager qui vérifie l'existence d'un fichier là ou tu stockeras tes fichiers modifiés.
- un imageManager qui fait les modifications sur un fichier image et peut éventuellement resizer en fonction des paramètres donnés

Tu enregistres les fichiers modifiés pour ne pas faire le traitement à chaque fois que tu appelles une image floutée, et tu vérifie l'existence du fichier avant de faire le traitement.

Pour l'implémentation des méthodes des services et la vérification des extension etc. je te laisse faire, je t'ai donné l'archi globale.

++

22/01/2015, 10h29
pixel016

Salut Nico, tu as bien compris en effet je veux faire un traitement de l'image.

Pas simple visiblement.
Je prends note de ce que tu me propose, mais c'est assez complexe quand même. Il n'y a pas possibilité d'utiliser par exemple de créer un filtre en utilisant le bundle LiipImagineBundle ? Ca serait peu être plus simple ? (oui je suis un vrai developpeur = féniant lol).

En utilisant ta solution, dans la fonction "blur" du service "imagemanager" j'ai juste à mettre ce traitement : ?

Code:

1
2
3
4
5
6
7
$response = new Response();
        $response->headers->set('Content-Type', 'image/jpeg');
        $response->send();
        $imageFlou = @imagecreatefromjpeg($image);
        imagejpeg($imageFlou);
        imagefilter($imageFlou, IMG_FILTER_GAUSSIAN_BLUR);
        imagedestroy($imageFlou);

22/01/2015, 12h10
Nico_F

Je ne connais pas ce bundle, à toi de voir s'il te permet de faire ce que tu souhaite, c'est possible.
C'est possible également que certains services existent déjà pour faire de l'édition d'image.

Tout ce que je t'ai donné c'est la manière de t'y prendre en utilisant une route interne à ton projet, sans nécessiter de librairie tierce.

Ta réponse devrait plutôt ressembler à quelque chose dans ce genre :

Code:

return new Response(readfile($blurredImage), 200, $headers);

Et les traitement d'image se font AVANT la réponse : ce n'est pas un filtre que tu appliques : ton action crée une nouvelle image, la sauvegarde et ensuite l'affiche.
22/01/2015, 14h27
pixel016

J'ai bien compris le principe mais c'est la technique qui me manque la ...

C'est pour ça que je m'orientais sur un bundle :s

Je pense que créer une version "floutée" et la stocker lors de l'upload me sera plus simple :s
22/01/2015, 16h21
Nico_F

Tout est là pratiquement, le contrôleur est quasiment complet, reste juste à créer les deux services (et leurs méthodes) et les injecter dans le contrôleur ou les récupérer depuis le container.

Avec la méthode blur() tu retournes ton image sur laquelle tu as appliqué la fonction image_filter.
Avec la méthode save() tu enregistres ton image quelque part et tu lui donne le path que tu auras défini lors de la vérification préalable.

Si tu n'as pas besoin de resizer tu peux oublier l'autre méthode et ne pas tenir compte des paramètres de dimension. Et c'est tout ce que tu as à faire : les méthodes PHP tu les connais. Il suffit juste de remettre tout ça dans les bons fichier et les bonnes méthodes.

Dis nous ou est-ce que tu coinces techniquement et on pourra te donner plus d'infos.
23/01/2015, 08h51
pixel016

Merci Nico.

J'ai au final crée mon image flou lors de l'upload (ce qui est plus simple pour moi et le résultat me conviens). Par contre le floutage

Code:

imagefilter($imageFlou, IMG_FILTER_GAUSSIAN_BLUR);

n'est vraiment pas satisfaisant pour moi. Je veux que la photo soit totalement floutée pour qu'on ne puisse pas distinguer vraiment le visage (pour une photo de profil).

Y a t'il des solutions pour cela ? J'ai essayé de copier cette fonction plusieur fois, le résultat est un peu meilleur mais le temps d'éxécution est trop long.
23/01/2015, 09h32
Nico_F

Je ne sais pas, je n'ai jamais eu l'occasion de faire du traitement d'image en PHP.
La fonction imagefilter prend un paquet d'arguments, regarde si tu peux jouer un peu avec.

http://php.net/manual/fr/function.imagefilter.php
23/01/2015, 09h39
pixel016

J'ai pas mal fait le tour et on ne peux visiblement pas entrer de paramètres pour changer la "puissance" du flou. (sauf erreur de ma part)

Voila pour ceux que ça intéresse j'ai trouvé ça qui fonctionne parfaitement

Code:

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
function blur($gdImageResource, $blurFactor = 5)
    {
      // blurFactor has to be an integer
      $blurFactor = round($blurFactor);
 
      $originalWidth = imagesx($gdImageResource);
      $originalHeight = imagesy($gdImageResource);
 
      $smallestWidth = ceil($originalWidth * pow(0.5, $blurFactor));
      $smallestHeight = ceil($originalHeight * pow(0.5, $blurFactor));
 
      // for the first run, the previous image is the original input
      $prevImage = $gdImageResource;
      $prevWidth = $originalWidth;
      $prevHeight = $originalHeight;
 
      // scale way down and gradually scale back up, blurring all the way
      for($i = 0; $i < $blurFactor; $i += 1)
      {   
        // determine dimensions of next image
        $nextWidth = $smallestWidth * pow(2, $i);
        $nextHeight = $smallestHeight * pow(2, $i);
 
        // resize previous image to next size
        $nextImage = imagecreatetruecolor($nextWidth, $nextHeight);
        imagecopyresized($nextImage, $prevImage, 0, 0, 0, 0,
          $nextWidth, $nextHeight, $prevWidth, $prevHeight);
 
        // apply blur filter
        imagefilter($nextImage, IMG_FILTER_GAUSSIAN_BLUR);
 
        // now the new image becomes the previous image for the next step
        $prevImage = $nextImage;
        $prevWidth = $nextWidth;
          $prevHeight = $nextHeight;
      }
 
      // scale back to original size and blur one more time
      imagecopyresized($gdImageResource, $nextImage,
        0, 0, 0, 0, $originalWidth, $originalHeight, $nextWidth, $nextHeight);
      imagefilter($gdImageResource, IMG_FILTER_GAUSSIAN_BLUR);
 
      // clean up
      imagedestroy($prevImage);
 
      // return result
      return $gdImageResource;
    }