Petite liste tirée des RSS que je suis en ce moment.

• un tuto pour apprendre à manipuler la webcam afin de générer une carte de noel. ➜ https://12daysofweb.dev/2021/capturing-user-media-streams/
• un menu drop-down accessible en CSS pur ➜: https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/
• utiliser le data-icon pour styler le list-style-image #astuce #pasCon ➜ https://moderncss.dev/totally-custom-list-styles/
• une galerie responsive avec des labels animés et des effets pour les images ➜ https://moderncss.dev/responsive-image-gallery-with-animated-captions/
• deux façons d'avoir des images responsives et full width en CSS pur ➜ https://moderncss.dev/css-only-full-width-responsive-images-2-ways/
• garder le footer en pied de page: flexbox vs grid ➜ https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/
• avoir des éléments de hauteur égale: flexbox vs grid ➜ https://moderncss.dev/equal-height-elements-flexbox-vs-grid/
• faire défiler la fenêtre jusqu'à un élément scrollIntoView() ➜ https://www.alsacreations.com/astuce/lire/1883-Le-scroll-maitrise-avec-scrollIntoView.html

Notes rapides sur la balise <dialog> et le JS .showModal(), .close()

On crée la boîte de dialogue en HTML/CSS

<dialog id="modal-dialog">
  <div class="dialog-content">
    <h3>Title</h3>
    <p>Question ?</p>
    <ul class="dialog-actions">
      <li><button type="button" data-action="confirm">Yes</button></li>
      <li><button type="button" data-action="cancel">Cancel</button></li>
    </ul>
  </div>
</dialog>

On crée le JS adapté

En gros on récupère le click sur l'objet document et on le traite en fonction de l'action prévue dans l'attribut data-action

const dialog = document.getElementById("modal-dialog"");    

document.addEventListener("click", ({ target }) => {
  // ... show logic
  // ... close logic

  if (target.matches('[data-action="confirm"]')) {
       // action si confirm
  }

  if (target.matches('[data-action="cancel"]')) {
       // action si cancel
      dialog.close();
  }

});

Je passe sur les circonstances qui m'amènent à changer mon lit pour passer à ce qui m'intéresse: faire un lit façon chalet...

Certains trouveront ça moche ou ouiche...

J'ai fait une structure toute en bois avec des pieds de 40cm afin d'avoir une assise haute: 40 cm de pieds + 5 cm de sommier à lattes + environ 17cm de matelas... on est bien, là.

J'y ai ajouté une tête de lit façon bloc étagère en incorporant des prises de courant et USB: hauteur 110 cm et profondeur 22cm.

Ensuite je me suis attaqué au pied de lit: une planche de pin de 60x200 que j'ai découpé façon chalet avec volutes et petits coeurs découpés (c'est la partie plutôt ouiche pour certains...)

Arrive la partie gravure

L'envie d'ajouter des motifs gravés au laser sur le pied de lit s'est imposée à moi.

J'ai opté pour des edelweiss sur les arrondis et une scène de ski que j'avais déjà utilisée sur un plateau entièrement fait à partir de chutes de bois (mais c'est une autre histoire)

Astuce #1

J'ai étrenné une astuce qui a vraiment bien fonctionné: afin d'éviter la brûlure des bords du motif gravé, qui offre un dégradé allant du marron au jaunâtre fumé du plus mauvais effet, j'ai recouvert la zone à graver de ruban à masquer.

Une fois la gravure terminée, on retire le ruban à masquer et le bois est bien préservé dessous.

Astuce #2

Le plus risqué est toujours de centrer correctement le motif sur le support. Mon truc, c'est d'arrêter de vouloir trouver le bon réglage des marges sur le logiciel de gravure et d'utiliser l'option «centrer le laser»

1. je marque le centre de la zone à graver au crayon,
2. je place la graveuse au doigt mouillé pour qu'elle soit alignée correctement horizontalement,
3. je clique sur «centrer le laser», je déplace la tête du laser à la main pour faire correspondre le spot avec le centre marqué au crayon,
4. je clique sur «corner» qui replace le laser au coin bas gauche du motif,
5. c'est parti...

ça marche à tous les coups.

Conclusion

Je vais pas vous péter le joufflu plus longtemps avec les détails, vous regarderez les photos . J'ai tout gravé dehors, sur la terrasse, avec des rallonges USB pour rester le cul bien au chaud derrière la baie vitrée...

Petit aparté...

Par contre, quand vous gravez, restez pas loin parce que des fois, ça prend feu...

Exemple, en passant devant pour la dixième fois, j'ai trouvé que ça fumait encore plus que d'habitude... normal vu que le cache avait choisi de se foutre à flamber...

Le laser est sans doute passé sur une partie de bois plus tendre ou un peu gondolée vers le haut... et au bout de deux heures... poufcétou.

Un petit résumé perso de cette page sur l'objet FormData en javascript.

Créer un objet FormData à partir d'un formulaire

let form = document.querySelector('form');
let data = new FormData(form);

Parcourir l'objet FormData

C'est un itérable, donc on le parcourt avec un for et on récupère des ['clé','valeur']

for (let entry of data) {
    console.log(entry);
}

ou

for (let [key, value] of data) {
    console.log(key);
    console.log(value);
}

parcourir les clés / les valeurs

for (let key of data.keys()) {
  console.log(key);
}

Get, set, update des valeurs

GET

Récupérer une valeur (sans rire ?!)

• S'il y a un seul champ au nom de la clé: let title = data.get('title')
• S'il y en a plusieurs : let titles = data.getAll('title');

SET

Ajouter une nouvelle valeur à l'objet FormData

data.set('date', '2022-12-25');

APPEND

Ajouter une valeur supplémentaire à une entrée existante (si l'entrée n'existe pas, elle est créée)

data.append('tags', 'vacations');

Divers

Tester si un champ existe

let hasID = data.has('id');

Récupérer un tableau

• des clés : let arr = Array.from(data.keys());
• des valeurs : let arr = Array.from(data.values());

Convertir un FormData en objet clés valeurs

Si votre FormData ne contient pas plusieurs champs ayant le même nom.

let serialized = Object.fromEntries(data);

Sinon, on paufine

let obj = {};
for (let [key, value] of data) {
    if (obj[key] !== undefined) {
        if (!Array.isArray(obj[key])) {
            obj[key] = [obj[key]];
        }
        obj[key].push(value);
    } else {
        obj[key] = value;
    }
}

Une fois converti en objet, on peut le transformer en JSON

let stringified = JSON.stringify(obj);

Tiens ? Je découvre l'attribut sandbox pour les iframe. C'est pas que j'en fasse usage en général mais bon...

Pour écouter un click hors d'un élément, on utilise l'event delegation: on vérifie si la target de l'event correspond ou pas à l'objet qu'on veut.

  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};
onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

Tiens, je ne savais pas qu'addEventListener acceptait des paramètres en option, en particulier un { once : true} qui permet de n'exécuter la fonction attachée à l'évènement qu'une seule fois...

const listenOnce = (el, evt, fn) =>
  el.addEventListener(evt, fn, { once: true });

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
); // 'Hello!' will only be logged on the first click

Salut les copaines !

Mon vieux nokia 7plus tombe en morceaux: écran pété, décollé, appareil photo devenu myope, ralentissements de ouf etc...

Du coup, je réfléchis à le changer pour noël.

Et là c'est le drame

Je regarde les smartphones dispo en ce moment mais j'ai vraiment du mal à m'orienter. Du coup, je me dis que je prendrais bien quelques conseils.

Mes critères:

• 🟢 bon en photo, y compris de nuit
• 🟢avec possibilité de mettre une carte SD
• 🟡 une version récente d'Android et des MAJ dans le futur
• 🟠 si possible pas de surcouche à la mords moi le noeud...
• pas trop cher: idéalement moins de 300€ et pas plus de 350. (très grand max)

Je ne joue pas avec: j'ai besoin de la photo, du navigateur, applis GPS, 9gag/reddit et consorts.

J'ai pensé à un Samsung galaxy A53 5g: plutôt bon en photo, SD mais surcouche.

(...)

Bon, c'est un fait, envoyer des fichiers sur toute machine de son réseau quel que soit son OS, c'est chiant... il y a bien KDE Connect et Warpinator... Mais c'est pas toujours foufou - et je suis un fervent adorateur de KDE Connect.

Déjà, c'est opensource et dispo sur Fdroid pour Android avec une version .deb/appimage... 👍

Localsend, qui se veut l'équivalent d'airdrop sur les machines à la pomme pour les poires (#payeTonTrollGratuit), semble une bonne alternative.

Stable Diffusion sur un RPI 2 ?! WUT ?!

/me ouvre le lien, /me lit le readme :

OnnxStream can run SDXL 1.0 in less than 300MB of RAM and therefore is able to run it comfortably on a RPI Zero 2, without adding more swap space and without writing anything to disk during inference. Generating a 10-steps image takes about 11 hours on my RPI Zero 2.

La génération d'une image 1024x1024 prend ... 11 heures.

Et là, c'est pour la laïcité à l'école ?! ha, non, dans le sport quand on est représentant de la fRance. pfff...

I have a dream: ces concitoyennes françaises vont concourir pour un autre pays et elles gagnent les médailles d'or au détriment de la fRance... façon Mitra Hejazipour, cette championne d'échecs iranienne exclue de la compet en Iran pour avoir refusé de porter le hidjab et venue s'inscrire en france.

Des femmes, des championnes, exclues simplement parce qu'on refuse de les laisser s'habiller comme elles le souhaitent. Au moins, l'iran ne se cache pas derrière une prétendue laïcité pour ça. (oui, je suis colère)

OMAGAD «cryptoprouts» ! Chuis mort de rire !

Merci pour cette expression que je vais adopter de ce pas et chérir de tout mon coeur de troll !

Oh ! Bon à savoir, ça: un médiateur gratuit qui permet de régler les conflits à l'amiable:

Compétent pour

• Problèmes de voisinage (bornage, droit de passage, mur mitoyen)
• Différends entre propriétaires et locataires ou entre locataires
• Différends relatifs à un contrat de travail
• Litiges de la consommation
• Litiges entre commerçants
• Litiges en matière de droit rural
• Litiges en matière prud'homale

On peut trouver le conciliateur le plus proche là: http://www.conciliateurs.fr/Trouver-une-permanence

Oblivion remaster : ils se sont rendu compte que le cadavre de Skyrim était froid, il font maintenant de la nécromancie avec celui d'Oblivion. C'est sale Bethesda, c'est très sale.

Pitin, ce que j'ai ri ! C'est tellement ça: de la nécromancie

Et tu sais quoi? ça m'a donné envie quand même ! comme quoi, je suis vraiment un con... sommateur

Aujourd'hui, je reviens de la cérémonie de crémation d'un de mes élèves de l'année dernière...

On a appris jeudi dernier qu'il s'était suicidé la veille au soir avec l'arme à feu de son grand-père.

Sous le choc, nous avons tous été extrêmement perturbés et profondément touchés par sa mort... je me souviens d'un môme attachant et discret, au sourire complice quand je faisais des blagues en espagnol, qui passait me voir en fin de journée avant de partir. Un gamin pas méchant pour deux sous, dépourvu de duplicité ou de mauvais sentiments, un garçon qui faisait des efforts en classe mais attendait l'interclasse pour échanger quelques mots avec moi.

Aujourd'hui, on a brûlé son corps en regardant des photos de lui défiler sur un écran et j'ai pleuré comme si c'était le mien... Les photos ressemblaient à celles que j'ai prises de mes mômes depuis 19 ans... et j'ai pas tenu.

Quand un enfant meurt, ce sont tous les parents du monde qui pleurent.

(...)

Comme prévu, on s'aperçoit qu'il y a peut-être de l'intox dans l'info qui prétend que des écolos ont empoisonné une rivière pour faire un genre de happening.

En même temps, c'est un peu gros quand même, hein: les Zécolos Gauchiss' idiots qui polluent toute une rivière pour lutter contre la pollution comme le plus con des américains qui pollue une rivière pour un gender reveal party.

un patch pour Starfield corrigera certaines des bethesdouilles les plus flagrantes du jeu. Seront ainsi rajoutés le support du DLSS, un réglage du FOV, un menu de calibration pour le HDR et des curseurs permettant de modifier le contraste et la luminosité de l'image.

Bon, je crois me rappeler que le DLSS est un genre d'upscaling mais j'en sais pas plus, donc je cherche un peu:

Comme son nom l’indique, le DLSS est une technologie d’upscaling reposant sur l’intelligence artificielle. Il existe en effet 4 techniques d’upscaling [...] Formulé plus simplement, le DLSS permet à un PC équipé d’une carte graphique et d’un processeur vieillissant d’afficher un jeu en 4K/60 FPS. Le DLSS est donc un cadeau tombé du ciel pour les joueurs ne pouvant pas se permettre de mettre régulièrement à jour leur setup pour profiter des derniers composants en date (https://www.phonandroid.com/dlss-tout-comprendre-sur-la-technologie-de-nvidia-qui-revolutionne-le-jeu-video.html)

Ha, bonne nouvelle alors ?! Regardons la liste des cartes compatibles sur la même page (j'ai pas cherché plus loin):

RTX 4060 RTX 4060 Ti RTX 4070 RTX 4070 Ti RTX 4080 RTX 4090

Donc des cartes allant de 350€ à 2000€...

Bon ben je vais continuer à jouer en mode potato, alors... Parce que même 350€, ça reste cher pour du matos qu'on associe déjà à des composants «vieillissants», en tout cas pour moi. Mon téléphone est explosé et ne fait plus de photos, mon tracteur de pelouse ne démarre plus sans starter extérieur, mes pneus commencent à être justes, on a les loyers de mes deux grands en ville etc etc. Comme tous les gens normaux, je peux pas me payer du matos tous les deux ans. Surtout qu'après, faut stocker... Quand on voit comment c'est dans mon bureau... (et je vous parle pas de chez Liandri )

Sans compter que s'il faut que je change mon compteur électrique et mon alim de PC pour installer une carte graphique qui coûte le PIB du Luxembourg en électricité... une carte qui ne rentrera probablement pas dans mon PC de toutes façons... et qui chauffera tellement que je devrai aussi changer les ventilos...

Bref, merci beaucoup Bethesda pour ce meeeeeerveilleux cadeau.

EDIT : petite annonce

Liandri en profite pour me dire via Signal qu'il vend sa config Gamer, donc je passe l'info

i7 9700k, 64go ram, rtx2080, bonne alim, boitier fractal design R6 silencieux et 4x SSD de 480go : 600€ .

Si ça vous intéresse, passez par moi ou contactez-le directement sur le mammouth

Deuxième épisode de mes notes perso sur la bibliothèque Image magic pour évoquer la classe ImagickDraw qui, comme son nom l'indique, permet de dessiner avec Imagick. ( 1er épisode )

On va se limiter à des usages basiques parce que la lecture du sommaire suffit à imaginer des possibilités certes alléchantes mais totalement hors de propos en ce qui me concerne (courbes de bézier etc)

Spoiler: c'est nettement moins intuitif et simple que pour le traitement d'image... l'écart entre Imagick et GD dans le domaine du tracé n'est plus si évident: ça mériterait de faire un classe pour simplifier tout ça... ( /me se jette sur son bujo pour griffonner spasmodiquement)

Préambule

Cette classe crée un objet servant d'instructions à appliquer ensuite à un objet Imagick.

On partira du principe que vous avez fait des instances des classes comme suit:

$im=new Imagick(); # l'image dans laquelle vous allez appliquer l'objet ImagickDraw
$draw=new ImagikDraw();

Ajouter un texte

Fixer les caractéristiques

• $draw->setFont(fonte); : sélectionne la fonte à utiliser
• $draw->setFontSize(taille); : définit la taille en pixels
• $draw->setFillColor(couleur);: définit la couleur de fond (normalement, couleur est un objet ImagickPixel, voir 1er épisode mais on peut passer une chaîne au format de couleur CSS )
• $draw->setTextAlignment(alignement); : une des constantes d'alignement imagick::ALIGN_LEFT imagick::ALIGN_CENTER Imagick::ALIGN_RIGHT
• $draw->setTextDecoration(decoration): une des constantes de décoration imagick::DECORATION_UNDERLINE imagick::DECORATION_OVERLINE imagick::DECORATION_LINETROUGH et bien d'autres (comme du... bruit ?!).
• $draw->setTextAntialias(true);: ajouter de l'antialias
• l'espacement :
  • entre les mots : $draw->setTextInterwordSpacing(taille)
  • entre les lignes : $draw->setTextInterlineSpacing(taille)

Tracer le texte

• $draw->annotation(x,y,texte) : trace un texte dans la police sélectionnée
• $im->annotateImage( $draw, 0, 0, 0, $fontName ); : ajoute le texte à l'image.

Obtenir des infos utiles

Array
(
    [characterWidth] => 9
    [characterHeight] => 9
    [ascender] => 9 # la taille au-dessus de la baseline
    [descender] => -2 # la taille sous la baseline
    [textWidth] => 71
    [textHeight] => 10
    [maxHorizontalAdvance] => 12
    [boundingBox] => Array
        (
            [x1] => 0
            [y1] => -2
            [x2] => 6.890625
            [y2] => 7
        )
    [originX] => 70
    [originY] => 0
)

Dessiner des formes

Fixer les caractéristiques

• opacité du trait : $draw->setStrokeOpacity(0-1);
• couleur du trait : $draw->setStrokeColor(couleur);
• épaisseur du trait : $draw->setStrokewidth(nb);
• type de trait : $draw->setStrokeDashArray() Le motif semble être plein de possibilités car on peut le définir très spécifiquement et même utiliser une image comme motif (->setStrokePatternURL)
• couleur de remplissage : $draw->setFillColor(couleur);

Formes

• cercle : $draw->circle ($x, $y, $x + $r, $y);
• ellipse : $draw->ellipse($ox,$oy,$rx,$ry,$start,$end);
• point : $draw->point ($x, $y);
• polygone : $draw->polygon ($tableau_de_coordonnées); : array( 'x' => 3, 'y' => 4 ), array( 'x' => 2, 'y' => 6 )
• ligne brisée : $draw->polyline ($tableau_de_coordonnées); : array( 'x' => 3, 'y' => 4 ), array( 'x' => 2, 'y' => 6 )
• rectangle : $draw->rectangle ($x, $y, $x2, $y2); )
• rectangle arrondi: $draw->roundRectangle ($x, $y, $x2, $y2,$rayonx,$rayony);

Exemple

Pour écrire un texte dans une image:

$text='pipo et mollo';
$im=new Imagick();
$draw=new ImagickDraw();
//var_dump($im->queryFonts('*'));exit;
$draw->setFont( 'Courier' );
$draw->setFontSize( 20 );
$draw->setFillColor( 'black' );
$draw->setTextAntialias(true);
$metrics = $im->queryFontMetrics($draw, $text);
$draw->annotation(0,$metrics['ascender'],$text);
$im->newImage( 300, 20, 'lightblue');
$im->drawImage($draw);
$im->setImageFormat( 'png' );
header('Content-type: image/jpeg');
exit($im);  

Il serait intéressant de pousser les tests mais là, j'ai pas le temps...

Peut-être reprendrais-je des trucs existant avec tout ça ( scriptopic, RoR, Stamp mematic etc etc.)

Allez, pour une fois, j'ai un peu de temps devant moi, je vais éplucher un peu la lib Image magick dont je parlais il n'y a guère...

La base

charger UNE image

Simple: pas besoin de plusieurs fonctions selon le format, il suffit de $images = new Imagick('image.jpg');

charger DES images (et là c'est fort)

Même pas nécessaire de passer par un foreach, on fournit le tableau des fichiers voire directement un glob: $images = new Imagick(glob('images/*.JPG'));

Sauver une image

$im->writeImage('image.jpg');

Faire une miniature

Si on laisse une dimension à 0, les proportions sont conservées (quand tu vois la merde que c'est avec GD !) $image->thumbnailImage(100, 0);

Output une image

header('Content-type: image/jpeg');
$image = new Imagick('image.jpg');
# ici on effectue un traitement puis on sort le résultat
echo $image;

Récupération d'infos sur les images

• taille $im->getImageWidth() $im->getImageHeight()
• format $im->getImageFormat()
  • 🆒 ⮕ pour fixer le format de l'image, c'est juste $im->setImageFormat('png'); ! 😍
  • 📘 on peut fixer le type de compression et l'intensité de celle-ci avec ->setCompression() et ->setCompressionQuality()

création d'une nouvelle image

$im->NewImage(largeur,hauteur,couleur de fond);

création d'une couleur

Comme pour GD, il faut créer un objet couleur dans les traitements d'image, mais c'est plus simple qu'avec GD (et plus complet): il suffit de passer une couleur selon les normes CSS. Du coup, la transparence n'est pas gérée par une connerie de paramètre «alpha» mais simplement par ... rgba()... 💖

$couleur=new ImagickPixel("white");
$couleur=new ImagickPixel("#FFF");
$couleur=new ImagickPixel('rgb(255,255,200)');
$couleur=new ImagickPixel('rgba(255,255,200,0.5)');

🆒 ⮕ Ça peut paraître compliqué, mais en fait, dans les fonctions où on est sensé utiliser ImagickPixel, je me suis aperçu qu'on pouvait tout simplement passer une string contenant la couleur css... elles se démerdent seules. 😍

Traitements

Ajouts

• de bordure ->borderImage(couleur,largeur bords verticaux, largeur bords horizontaux): $im->borderImage(new ImagickPixel("white"), 5, 5);
• de texte :
  • ->setFont() : $im->setFont("example.ttf");
  • ->annotateImage(objet ImagiDraw,x,y,angle,texte) : là il faut utiliser un objet ImagiDraw, que je n'ai pas encore regardé: https://www.php.net/manual/fr/class.imagickdraw.php
• de stéganographie (cacher un filigrane dans une image) ->steganoImage():

Modification de couleurs

• sepia ->sepiaToneImage(force) : une valeur raisonnable est 80 (sic)
• solarisation ->solarizeImage(force)
• négatif ->negateImage(gris): $im->negateImage(0);
• niveaux
  • $im->normalizeImage();
  • $im->autoLevelImage();
• gamma ->gammaImage(niveau) : $im->gammaImage(5);
• contraste $im->contrastImage(niveau)
• luminosité et contraste $im->brightnessContrastImage(niveau luminosite, niveau contraste);
• égalisation $im->equalizeImage()
• coloriser ->colorizeImage(couleur,opacite) : $im->colorizeImage("red",0.5); 🤬 pas réussi à l'utiliser pour ce test...

Modification de taille et d'orientation

• redimensionner :
  • ->resizeImage(largeur,hauteur, filtre, flou) : $i->resizeImage(250,0,Imagick::FILTER_POINT,0);
    • ⭐ note 1: le filtre influe sur la qualité et sur la vitesse: voir https://www.php.net/manual/fr/imagick.resizeimage.php#94493
    • 🆒 note 2 : si on laisse une des dimensions à 0, les proportions sont conservées
  • ->scaleImage(largeur,hauteur): pas encore compris la différence avec la précédente
  • recadrer ->cropImage(largeur,hauteur,x,y): $im->cropImage(200,200,50,50);
  • 💖 créer une miniature à la taille donnée en recadrant l'image autour du centre ->cropThumbnailImage(largeur,hauteur)
• retourner :
  • $im->flipImage() pour retourner horizontalement
  • $im->flopImage() pour retourner verticalement
• pivoter ->rotateimage(color, $angle): $im->rotateImage(new ImagickPixel('#00000000'), 75);

Modifications de qualité

• modification d'opacité ->setImageOpacity(0-1) : $im->->setImageOpacity(0.3);
• netteté ->sharpenImage(rayon, deviation,canal):
• amélioration ->enhanceImage()
• flou :
  • flou tout court ->blurImage(rayon, décalage): $im->blurImage(5,2);
  • gaussien ->gaussianBlurImage(rayon, deviation) : $im->gaussianBlurImage(5,2);
  • de mouvement ->motionBlurImage(rayon,deviation,angle) : $im->motionBlurImage(5,5,45);
• réduction du nombre de couleurs ->posterizeImage(nb de couleurs, 0/1) :$im->posterizeImage(5,0);
• ajout de bruit ->addNoiseImage(type) : `$im->addNoiseImage(imagick::NOISE_GAUSSIAN ); voir les constantes de type de bruit

Modification d'aspect et déformations

• aspect crayon $im->sketchImage(rayon, deviation, angle);
• aspect fusain $im ->charcoalImage(rayon, deviation);
• aspect emboss ->shadeImage(gris, angle, hauteur):
  • $im->->shadeImage(1, 90, 2); # emboss + image grisée
  • $im->shadeImage(0, 90,2) # emboss sur l'image d'origine (couleur)
• peinture à l'huile ->oilPaintImage(rayon) : $im->oilPaintImage(5);
• détection de bords ->edgeImage(rayon) : $im->edgeImage(5);
• vagues ->waves(amplitude,longueur): $im->waveImage( 10, 10);
• déformation ->distortImage(methode, arguments[],0) : voir les constantes de déformation

interactions d'images

• clonage d'une image ->clone(): $imageclonee=$image->clone();
• mélange d'images ->compositeImage($image,composition,x,y,[canal]): $im->compositeImage($autreimage, imagick::COMPOSITE_OVER, 0, 0); (la composition, la façon de mélanger les images, peut être une de celles-ci https://www.php.net/manual/fr/imagick.constants.php#imagick.constants.compositeop)

Conclusion

Image Magick me semble particulièrement bien nommée tant les possibilités sont énormes et la simplicité d'utilisation étonnante: on sent une volonté de se simplifier la vie lors de l'utilisation... c'est juste beau.

Je voulais mettre une image de chaque effet dans les descriptions mais:

1. ça prenait une place de ouf
2. je préfère reprendre certaines de mes applis/api avec imagick
3. j'ai plus le temps, les autres arrivent
4. j'ai la flemme.

[EDIT] En fait, j'ai fait une page de test même si tout n'est pas concluant : http://test.warriordudimanche.net/imagick/

Pour un de mes futurs projets, j'avais besoin d'un nouveau microservice d'avatars...

J'avais déjà fait un générateur d'avatars pixelisés il y a longtemps mais là, il me faudrait un service qui superpose divers «calques» pour générer un avatar en fonction du nom de la personne.

Je me suis lancé, comme d'hab', en réutilisant une classe simplifiant l'usage de la lib GD en PHP.

C'était souple et simple mais le résultat restait assez décevant parce que je ne parvenais pas à gérer correctement la transparence des PNG: GD ne prenait en compte qu'une seule couleur transparente et on se retrouve avec un GIF like en qualité potato...

Après avoir cherché, lutté, testé des trucs, modifié ma classe... le ratio temps demandé/résultat obtenu m'a poussé à me dire : «stop, il doit y avoir un moyen plus simple»

Ben vous savez quoi ? Il y a. Oui.

Ma classe était déjà vraiment pas mal car elle permettait de faire les choses simplement... Mais, juste pour tester, j'ai essayé ImageMagick.

Reprendre mon code pour utiliser cette lib m'a pris un gros quart d'heure et cinq fois moins de code. Et ça a marché. Propre. Du premier coup.

Conclusion

🟢 rapide

🟢 simple d'utilisation (5 minutes pour piger les bases)

🟢 efficace

🟢 code ultra lisible et compact à la fin

🟢 se suffit à elle-même et gère seule les trucs chiants