Tourner une image et autres trucs

la suite de https://zestedesavoir.com/forums/sujet/5684/faire-de-belles-images-bien-nettes/

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour, après avoir obtenu une belle image de beau poisson pour un projet, j'aimerais opérer des transformations dessus. Mon poisson, c'est celui-là :

Image utilisateur

J'aimerais faire plusieurs choses, que je vais toutes réunir ici :

-"Tourner" le poisson, c'est à dire inverser la partie droite et gauche. (Je pourrais aussi mettre une deuxième image du poisson à l'envers mais ça me forcerais à ajouter une copie de l'image, qui pèse déjà lourd)

-Le site est connecté à une base de données mySQL, comment je pourrais vérifier régulièrement s'il y a eu de nouvelles entrées ?

-faire un "swap color", c'est à dire changer les couleurs dynamiquement

quelqu'un sait faire ça ?

ps : j'avoue, la résolution du poisson est abusée, il pèse plus de 1Mo, et ses ppp sont supérieurs à ceux d'un écran rétina

Édité par Teillo

+0 -0

Pour inverser le poisson dans un canvas, je ne sais pas si c'est le plus adapté mais on peut faire avec la « transformation matrix » : il s'agit d'une matrice qui multiplie chaque point dessiné avant de déterminer à quelle position il va être effectivement dessiné sur le canvas (la transformation est appliquée à tout ce qui est dessiné par la suite). Ça permet de faire toute transformation affine. Ce que tu peux donc faire est ctx.scale(-1,1), précédé d'un ctx.translate(abscisse du milieu de l'image, 0 ) et suivi de ctx.translate(-abscisse du milieu de l'image, 0) (les transformations sont appliquées dans l'ordre inverse de leur apparition dans le code). Après avoir dessiné l'image, il faut faire ctx.resetTransform() pour ne pas affecter le reste. Tu peux aussi faire tourner le poisson avec ctx.rotate(angle).

Édité par blo yhg

+1 -0

Le js et le php ce n'est pas la même chose, je te laisse regarder ci-dessous les liens. Tu peux aussi trouver facilement des tutoriels sur la lib GD (en php).

En php :

Au lieu d'utiliser du js, j'utiliserai du CSS3 :

En js :

Je n'ai pas pris le temps de détaillé ma réponse, apparemment tu ne sais pas très bien comment tu veux le faire. Le choix du langage dépend de l'usage de l'image, et du nombre de changement, ainsi que le public visé.

Pour le changement de couleur as-tu des connaissances en Javascript ?

Tu as deux méthodes, la première changer la couleur orange par une autre.

La deuxième, tu changes les couleurs selon un filtre (une deuxième image), ça permet d'être plus précis. Tu localises les pixels à changer en fonction des pixels verts.

Imgur

Édité par A-312

+1 -0

Si tu as du SVG, pourquoi ne pas directement modifier les attributs des balises SVG ?

Je veux dire, si tu as du SVG, dans ton image, il y a une couleur. Tu la changes pour changer la couleur. De même, il existe l'attribut transform qui te permettra de faire des rotations et autres directement depuis le SVG.

ache.one                                                                                   🦊

+2 -0
Auteur du sujet

J'ai mis [Js] et [Php] en tags car j'utilise les deux technos, mais pour le poisson le js me semble être le plus adapté (puisque ça doit être dynamique)

Si tu as du SVG, pourquoi ne pas directement modifier les attributs des balises SVG ?

J'ai fais mon poisson avec Inkscape, et j'ai essayé de coller le code directement, mais rien ne s'affichait (avec les balises <svg>)

Pour être plus clair quand à mes intentions, la page doit obtenir des infos d'une base de données, et si des nouveaux éléments ont été ajoutés, des poissons de tailles variables seront affichés dans une zone, et tournés ou non aléatoirement (parceque c'est plus joli)

Édité par Teillo

+0 -0
Auteur du sujet

Bon bah pour les poissons tournés c'est plié, je l'ai fait en css + js :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function myFunction() {
    var image = document.createElement("IMG");
    var flip = (Math.floor(Math.random() * (1 - 0 + 1)) + 0);
    var wid = (Math.floor(Math.random() * (500 - 0 + 1)) + 0).toString();
    var hei = (Math.floor(Math.random() * (500 - 0 + 1)) + 0).toString();

    image.src = "Art/Clown_Final.png";
    image.setAttribute("width", "500px");
    image.setAttribute("height", "300px");
    if (flip == 0){
        image.setAttribute("style", "position:absolute; top:" + wid + ";left:"+ hei + ";");
    }else {
        image.setAttribute("style", "position:absolute; top:" + wid + ";left:"+ hei + ";");
        image.setAttribute("class", "flipped");
    }
    document.getElementById("main_div").appendChild(image);
}

ça c'est le script qui créé les poissons

1
2
3
4
5
6
7
8
.flipped{
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

et là la css qui les tourne

reste maintenant le lien avec la base

+0 -0
Auteur du sujet

[je continue ce post, pour aider ceux qui auraient le même problème, ou m'aider moi-même du futur]

Le poisson est en 500x300 px. Pour créer des poissons de taille différente en gardant un rapport correct, il faut créer une hauteur aléatoire, puis la multiplier par 1.6 pour que la longueur son proportionnelle.

1
2
3
4
5
6
var fish_hei = (Math.floor(Math.random() * (300 - 1 + 1)) + 1).toString();
    var fish_wid = (fish_hei * 1.6).toString();

    image.src = "Art/Clown_Final.png";
    image.setAttribute("width", ""+ fish_wid + "px");
    image.setAttribute("height", "" + fish_hei + "px");
+0 -0
Auteur du sujet

Pour plus de précision je te conseille de garder sous forme de fraction 5/3

C'est une bonne idée, je vais peut-être faire ça

J'y connais rien en JS, mais le (300 - 1 + 1) ca se simplifie pas ?? Tout comme les 500 - 0 + 1 etc.

ça c'est pour faire les nombres aléatoires, c'est un bête copié/collé (300 c'est le max, et 0 le min)

Vous pouvez admirer mon site dégueulasse ici : http://jdoe.hostfree.pw/ (plus accessible)

Édité par Teillo

+0 -0

J'y connais rien en JS, mais le (300 - 1 + 1) ca se simplifie pas ?? Tout comme les 500 - 0 + 1 etc.

Gwend@l

Arf, chuttt.

Dans ce cas là, ça se simplifie. Oui, mais en JS justement l’addition est pas du tout commutative ni associative si on mélange les types.

Édité par ache

ache.one                                                                                   🦊

+0 -0

Je ne sais pas répondre à ta question (cherches « long-polling » ou « server-sent events ») mais c'est normal que ton site renvoie vers un truc « suspendeddomain », avec des pubs pour hébergement web ?

Édité par blo yhg

+1 -0
Auteur du sujet

c'était un truc d'hébergement gratuit, et on dirait que c'est nul en fait. Je vais retirer le lien.

Il est 21:03, je n'ai pas bu, j'ai cliqué dessus et ça marche O_O wtf genre un coup c'est une pub un coup c'est bon

Édité par Teillo

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte