Tourner une image et autres trucs

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

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

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

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 :

• Avec la fonction : imageflip($img, IMG_FLIP_HORIZONTAL);
• How to flip image horizontaly and vertically with php
• How to flip part of an image horizontal with PHP GD

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

• La fonction scale : https://css-tricks.com/snippets/css/flip-an-image/.

En js :

• La propriété transform.

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.

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.

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)

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

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

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

Sinon pour une hauteur de 500px, tu as 33 pixels en moins.

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

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)

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.

Bon, et pour la mise à jour des données, un javascript qui appelle une page php toutes les x secondes, ça semble bien non ?

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 ?

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