Discussion :

[darknoo]

Bonsoir,

Y'a-t-il un moyen, étant donné :

- une image .jpg
- un cercle donné par son centre et son rayon

d'afficher, à l'utilisateur, uniquement le cercle extrait de l'image ? (avec du transparent autour)

Merci pour votre disponibilité !

[unapologetic]

Il faudrait que tu précises un peu mieux ce que tu veux faire,
souhaite tu "arrondir" les angles de ta photo jusqu'à obtenir un cercle ?
Ou ta demande est-elle plus complexe que ça ?

[darknoo]

Voici ce que je souhaiterais faire :

[thelvin]

En théorie c'est à ça que devrait servir CSS clip un jour, mais à l'heure actuelle ce n'est pas le cas.

Il y aurait la solution de mettre une image blanche par dessus, opaque mais avec un trou transparent sur le cercle que tu veux laisser voir, mais ça ne permet pas d'avoir de la transparence autour du cercle : l'image opaque doit être équivalente au fond qui entoure le cercle.

La seule solution réaliste qui reste, c'est de dessiner le cercle dans un <canvas>, avec du JavaScript.

[Candygirl]

Dans l'idée tu peux obtenir quelque chose en jouant avec une image de fond et border-radius:

Code :

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

1
2
3
4
5
6
div {
	width:80px;height:80px; /* 2*rayon */
	border:1px solid black;
	border-radius:40px; /* rayon */
	background:url(obama.jpg) -40px -4px; /* -(position x du centre - rayon) -(position y du centre - rayon) */
}

Après, tu peux même bricoler pour le faire avec l'image elle-même ^^:

Code :

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

1
2
3
4
5
6
7
img {
	width:0;height:0;
	padding:40px;
	border:1px solid black;
	border-radius:40px;
	background:url(obama.jpg) -40px -4px;
}

Border-radius ne fonctionne pas sur IE8 et l'ajout d'un padding sur une image, je ne me rappelle plus si ça marche à partir de IE6 ou 7 (je crois que c'est sur IE5.5 que cela ne fonctionne pas...)

[darknoo]

Merci beaucoup !