Sélection sur image

Parfois, nous souhaitons sélectionner une partie d'une grande image: les logiciels de traitement d'image nous le permettent facilement.

Je voudrais essayer de publier un petit programme pour obtenir un code html pour le faire: je ne suis pas sûr de réussir !

Commençons par héberger, dimensionner et récupérer son adresse sur Ekla à notre image; la taille en sera 1000x563px (16/6)

Son adresse, en ouvrant le code source (<>) est: https://ekladata.com/iWHZeskQCPEIY1stvMXe2bdM9pI@1000x563.jpg.

Je vais maintenant la placer en fond d'un cadre pour pouvoir agir sur elle.

<p id="fd1">&nbsp;</p>
<style><!--
#fd1{ width:1000px; height:563px; border:1px solid black; transform:translate(500px,0px); background:url(' https://ekladata.com/iWHZeskQCPEIY1stvMXe2bdM9pI.jpg'); background-position-x:0px; background-position-y:0px; background-size:100%; transition:all 1s linear; background-repeat:no-repeat;}
--></style>

Et c'est là que ça se corse, comme on dit à Bastia ! car il faut préparer un code avec du javascript, ce que, généralement, je déconseille !

L'adresse placée en fond est celle de l'image en 1920x1080px (voir ma page ICI) de façon à ce que l'agrandissement reste net.

Inscrivez, dans chaque case, une valeur selon exemple et cliquez sur le bouton correspondant.

Attention pour l'adresse de votre image, il faut l'écrire comme:url('http:// ****.jpg')

Commencez en agrandissant le % de l'image de fond, car ensuite, il vous faudra la déplacer pour la centrer sur le sujet choisi, par position h et v, que je laisse en +/- px car ça me semble plus explicite.

Une fois vos valeurs définies, reportez-les dans le code ci-dessus et collez-le en code source d'un article.le code ci-dessus.

Retour à zéro en effaçant les valeurs et en cliquant sur les boutons.

Quelques exemples de valeurs indicatives: cela peut vous servir pour publier une image qui est en 16/9 en taille au rapport 4/3
Centrage sur la cascade:
<p id="fd1">&nbsp;</p>
<style><!--
#fd1{width:1000px; height:563px; border:1px solid black; transform:translate(500px,0px); background:url(' https://ekladata.com/iWHZeskQCPEIY1stvMXe2bdM9pI.jpg'); background-position-x:-1000px; background-position-y:-500px; background-size:300%; transition:all 1s linear; background-repeat:no-repeat;}
--></style>
centrage sur un arbre:
<p id="fd1">&nbsp;</p>
<style><!--
#fd1{width:1000px; height:563px; border:1px solid black; transform:translate(500px,0px); background:url(' https://ekladata.com/iWHZeskQCPEIY1stvMXe2bdM9pI.jpg'); background-position-x:-1000px; background-position-y:-550px; background-size:200%; transition:all 1s linear; background-repeat:no-repeat;}
--></style>
Centrage arbre et réduction taille:
<p id="fd1">&nbsp;</p>
<style><!--
#fd1{width:500px; height:300px; border:1px solid black; transform:translate(500px,0px); background:url(' https://ekladata.com/iWHZeskQCPEIY1stvMXe2bdM9pI.jpg'); background-position-x:0px; background-position-y:-350px; background-size:300%; transition:all 1s linear; background-repeat:no-repeat;}
--></style>