Discussion :

[pixel016]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mon extension twig :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
    }
}

[bilbot]

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

[Nico_F]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

++

[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).

[pixel016]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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