photo en fullscreen ?

Le 16/03/2016 11:18, Une Bévue a écrit :

j'ai dans une page une photo réduite en taille et je voudrais passer
l'original en fullscreen.

comment faire ?

grosso-modo j'ai deux images :

l'une fait 640x460 (thumb obtenu par imagemagick) l'autre, l'original
fait, entre autre, 2848x4288 ou 4288x2848,.

comme je gère plusieurs APN, le format des photos varie.

déjà est-ce que le fulscreen tient compte de l'exif
(horizontal/verticaal) ?

bon, j'ai trouvé une première solution avec "screenfull" :
<https://github.com/sindresorhus/screenfull.js/>
demo :
<https://sindresorhus.com/screenfull.js/>

j'ai juste mis :

<script
src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.0.0/screenfull.min.js"
type="application/javascript" charset="utf-8"></script>
<script>
window.addEventListener('load', start, false);
var photo;
function start (event) {
photo = document.getElementById('photo');
if (screenfull.enabled) {
photo.addEventListener('click', function () {
if (screenfull.isFullscreen) {
screenfull.exit(photo);
photo.src =
"/Photos/images/2016_03_04__17_09_51__DSC_0013.png";
photo.style.width= '640px';
} else {
screenfull.request(photo);
photo.src =
'/Photos/Nikon_Transfer_2/2016/03/04/2016_03_04__17_09_51__DSC_0013.JPG';
photo.style.width= '100%';
}
});
}
}
</script>


reste à savoir si ça roule pour une photo verticale...
càd : est-elle tournée de 90° en fonction d'EXIF ???

Le 16/03/2016 13:54, Une Bévue a écrit :

bon, j'ai trouvé une première solution avec "screenfull" :
<https://github.com/sindresorhus/screenfull.js/>
demo :
<https://sindresorhus.com/screenfull.js/>

Autre solution, sans screenfull :
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
window.addEventListener('load', start, false);
document.addEventListener('fullscreenchange',
function (event) {
console.log('fullscreenchange');
},
false
);
var photo;
function start (event) {
photo = document.getElementById('photo');
photo.addEventListener('click', function () {
if (JSON.parse(photo.dataset.fullscreen)) {
exitFullscreen();
photo.src = "/Photos/images/2016_03_04__17_09_51__DSC_0013.png";
photo.style.width= '640px';
photo.dataset.fullscreen = "false";
} else {
launchIntoFullscreen(photo);
photo.src =
'/Photos/Nikon_Transfer_2/2016/03/04/2016_03_04__17_09_51__DSC_0013.JPG';
photo.style.width= '100%';
photo.dataset.fullscreen = "true";
}
});
}

copié de :
<https://davidwalsh.name/fullscreen>

Une Bévue :

j'ai dans une page une photo réduite en taille et je voudrais passer
l'original en fullscreen.

comment faire ?

<blah>
J'apprends ici qu'il existe maintenant une API FullScreen (presque?)
officielle. Pourtant il me semble que les raisons pour lesquelles il
était impossible (difficile) de passer en FS programmatiquement restent
valables. Pour moi, forcer en FS est une intervention sur le système, à
l'extérieur de la page concernée, quelque chose de très intrusif.
D'ailleurs, avant YouTube et Cie, ça intéressait essentiellement les
emmerdeurs auteurs de pop-ups invasives. Il est étonnant de trouver
Mozilla dans ce coup alors que Firefox part en sucette face à
l'envahissement de JS commerciaux et crapuleux.
Bien entendu, c'est séduisant sur des jeux, mais dans mon idée il
s'agit alors d'applications, et non simplement de sites.
</blah>

J'en étais donc resté au "fullbody" avec éventuellement une suggestion
de F11. Ça fonctionne /a priori/ tout navigateur [récent ?], tout OS
[récent ?]. Edge est à part, mais je crois que qui a Edge a IE11.
Dans mon exemple (stade expérimental non terminé) j'affiche en fullbody
centré avec (ou sans) resize pour contraindre à la taille de la page,
ça pourrait être n'importe quelle page contenant l'image "contrainte",
du CSS suffit. Par un toggle en JS (clic ou touche CTRL) je passe à un
affichage "100%", 1 pixel pour 1 point. Je reviens en arrière par la
touche CTRL uniquement.
TODO: ergonomie, curseurs de souris (selon navigateur), bulles d'aide,
dévalider si inutile (image déjà fullsize par exemple).

Dans le HTML:
<img id="theimage" class="visible centered" src="url.image" />
<img id="thegrosseimage" src="url.image" />

Dans le CSS:
html {
background: #222222;
overflow: hidden;
}

img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: none;
max-height: none;
display: none;
}

img#thegrosseimage {
max-width: none;
max-height: none;
}

img#theimage {
max-width: 95%;
max-height: 95%;
}

img.visible {
display: block;
}

Un bout du JS (jQuery):
$(document).ready(function(){
// ...
theimage.click(function() {
$('#theimage, #thegrosseimage').toggleClass("visible");
});

(vous pouvez récupérer les codes dans le débogueur de votre navigateur)

Voir ici:

<URL: http://pierre.maurette.fr/bwatafoto/nouser/4.jpg/display>
<URL: http://pierre.maurette.fr/bwatafoto/nouser/test6000.jpg/display>
<URL:
http://pierre.maurette.fr/bwatafoto/nouser/test640x480.jpg/display>

A la lecture de vos messages, j'ai voulu tester le forçage FullScreen
en passant en affichage 100%. Juste une fonction à ajouter dans le JS
et un contrôleur (ffs pour "force full screen"):

<URL: http://pierre.maurette.fr/bwatafoto/nouser/4.jpg/displayffs>
<URL:
http://pierre.maurette.fr/bwatafoto/nouser/test6000.jpg/displayffs>
<URL:
http://pierre.maurette.fr/bwatafoto/nouser/test640x480.jpg/displayffs>

Nota: pour passer d'une image dans une page à un plein format, vous
pouvez également passer par une modale (pas fait de ffs ici), cliquer
sur l'image du caroussel:

<URL: http://pierre.maurette.fr/objet/zuiko_2>

--
Pierre Maurette

Une Bévue :

[...]

l'une fait 640x460 (thumb obtenu par imagemagick) l'autre, l'original fait,
entre autre, 2848x4288 ou 4288x2848,.

Je viens de perdre beaucoup de temps avec ImageMagick, je me permets
donc de répondre à quelques questions non posées.

D'abord, il n'est pas toujours nécessaire de proposer des images
réduites, à partir du moment où un lien permettra d'afficher l'image
"full". Il serait éventuellement préférable d'optimiser via du jpeg
progressif.

Ensuite, il est à mon avis toujours préférable, si on peut, de réduire
offline. J'ai constaté que l'impact visuel d'un bon travail sur la
réduction en vignettes (genre 130x130, voire 80x80) est important, sur
une page qui sera souvent vue très tôt dans la navigation. On trouve de
beaux sites pour lesquels l'accueuil se fait sur une collections de
vignettes moisies...

On peut néanmoins être obligé de passer par de la réduction coté
serveur, ce fut mon cas via JQuery File Upload (blueimp). La phase
"cosmétique" de fabrication du thumbnail destiné à être renvoyé au
client pour affichage (!!) était très longue et souvent à l'origine de
"intenal errors". Plutôt sur le serveur mutualisé (1and1). J'ai réglé
le plus évident, tout ce que je pouvais dans les php.ini en termes de
limites mémoire, taille d'upload, taille de post, etc. Ensuite j'ai eu
des comportement qui semblaient plus liés aux dimensions de l'image
qu'à son poids. A ce stade, je devais être fatigué, j'ai été minable,
alors que j'avais tous les éléments devant les yeux. Je suis passé en
Php 7 (je voulais le faire, de toutes façons), de fil en aiguille en
Symfony3. Toujours pareil (quelle surprise ;-) ). J'ai installé la
dernière version d'ImageMagick sur mon espace (c'est sans problème),
bien entendu, toujours pareil. C'est là que j'ai pensé que je pouvais
*également* réfléchir. Le pire c'est que connaissant PIL (Python) je
pouvais prévoir ce qui se passait. Quand le programme traite une image
de 6000x4000, il crée au départ en mémoire un tableau de pixels (du
bitmap) dont la taille ne dépend bien entendu pas de la compression du
jpeg de départ. Un truc assez "huge" à vrai dire, incompatible avec ce
qui est mis à dispo de Php dans un mutualisé. Il suffisait donc de
demander à ImageMagick (convert en l'occurence) de swapper sur le
disque, c'est du moins ce que j'ai compris du paramètre envoyé:
convert_bin: '/path2monImageMagick/convert -limit memory 32MiB'
identify_bin: '/path2monImageMagick/identify -limit memory 32MiB'

C'est très lent, surtout quand un utilisateur attend un affichage. Je
vais peut-être voir à remplacer ImageMagick->convert par un équivalent
en Python (PIL ?).

--
Pierre Maurette

Pierre Maurette <maurette.pierre@free.fr> wrote:

C'est très lent, surtout quand un utilisateur attend un affichage. Je
vais peut-être voir à remplacer ImageMagick->convert par un équivalent
en Python (PIL ?).

Vaudrait mieux Pillow, le successeur de PIL qui n'est plus mis à jour
depuis 2009.
Pillow est plutot bien compatible PIL (même classes)
<https://pillow.readthedocs.org/en/3.1.x/>

--
Pierre-Alain Dorange Moof <http://clarus.chez-alice.fr/>

Ce message est sous licence Creative Commons "by-nc-sa-2.0"
<http://creativecommons.org/licenses/by-nc-sa/2.0/fr/>

Le 18/03/2016 08:51, Pierre Maurette a écrit :

Une Bévue :

j'ai dans une page une photo réduite en taille et je voudrais passer
l'original en fullscreen.

comment faire ?

<blah>
J'apprends ici qu'il existe maintenant une API FullScreen (presque?)
officielle. Pourtant il me semble que les raisons pour lesquelles il
était impossible (difficile) de passer en FS programmatiquement restent
valables. Pour moi, forcer en FS est une intervention sur le système, à
l'extérieur de la page concernée, quelque chose de très intrusif.
D'ailleurs, avant YouTube et Cie, ça intéressait essentiellement les
emmerdeurs auteurs de pop-ups invasives. Il est étonnant de trouver
Mozilla dans ce coup alors que Firefox part en sucette face à
l'envahissement de JS commerciaux et crapuleux.
Bien entendu, c'est séduisant sur des jeux, mais dans mon idée il s'agit
alors d'applications, et non simplement de sites.
</blah>

J'en étais donc resté au "fullbody" avec éventuellement une suggestion
de F11. Ça fonctionne /a priori/ tout navigateur [récent ?], tout OS
[récent ?]. Edge est à part, mais je crois que qui a Edge a IE11.
Dans mon exemple (stade expérimental non terminé) j'affiche en fullbody
centré avec (ou sans) resize pour contraindre à la taille de la page, ça
pourrait être n'importe quelle page contenant l'image "contrainte", du
CSS suffit. Par un toggle en JS (clic ou touche CTRL) je passe à un
affichage "100%", 1 pixel pour 1 point. Je reviens en arrière par la
touche CTRL uniquement.
TODO: ergonomie, curseurs de souris (selon navigateur), bulles d'aide,
dévalider si inutile (image déjà fullsize par exemple).

Dans le HTML:
<img id="theimage" class="visible centered" src="url.image" />
<img id="thegrosseimage" src="url.image" />

Dans le CSS:
html {
background: #222222;
overflow: hidden;
}

img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: none;
max-height: none;
display: none;
}

img#thegrosseimage {
max-width: none;
max-height: none;
}

img#theimage {
max-width: 95%;
max-height: 95%;
}

img.visible {
display: block;
}

Un bout du JS (jQuery):
$(document).ready(function(){
// ...
theimage.click(function() {
$('#theimage, #thegrosseimage').toggleClass("visible");
});

(vous pouvez récupérer les codes dans le débogueur de votre navigateur)

Voir ici:

<URL: http://pierre.maurette.fr/bwatafoto/nouser/4.jpg/display>
<URL: http://pierre.maurette.fr/bwatafoto/nouser/test6000.jpg/display>
<URL: http://pierre.maurette.fr/bwatafoto/nouser/test640x480.jpg/display>

A la lecture de vos messages, j'ai voulu tester le forçage FullScreen en
passant en affichage 100%. Juste une fonction à ajouter dans le JS et un
contrôleur (ffs pour "force full screen"):

<URL: http://pierre.maurette.fr/bwatafoto/nouser/4.jpg/displayffs>
<URL: http://pierre.maurette.fr/bwatafoto/nouser/test6000.jpg/displayffs>
<URL:
http://pierre.maurette.fr/bwatafoto/nouser/test640x480.jpg/displayffs>

Nota: pour passer d'une image dans une page à un plein format, vous
pouvez également passer par une modale (pas fait de ffs ici), cliquer
sur l'image du caroussel:

<URL: http://pierre.maurette.fr/objet/zuiko_2>

merci beaucoup pour votre longue réponse.

depuis ma question, j'ai trouvé ce qu'il me faut.

et j'ai remarqué qu'en "fullscreen" la div, par exemple, passée en
fullscreen restait avec les mêmes dimensions.

j'ai donc du "bidouiller" pour parvenir à une solution qui roule.

remarque : c'est l'utilisateur qui autorise - ou non - de pouvoir passer
en mode fullscreen, pas de forçage donc.

mon "site" est en réalité une application locale.

Le 18/03/2016 09:31, Pierre Maurette a écrit :

l'une fait 640x460 (thumb obtenu par imagemagick) l'autre, l'original
fait, entre autre, 2848x4288 ou 4288x2848,.

Je viens de perdre beaucoup de temps avec ImageMagick, je me permets
donc de répondre à quelques questions non posées.

oui, j'ai lu mais, dans mon cas très spécifique, les "images" sont en
réalité celles de mon répertoire photos.

en fait jusqu'ici, je produisait deux images réduites :
l'une en 250 x 188 (quelque soit le format initial de l'image =>
j'ajoutait, avec ImageMagick, des marges transparent "accordingly")

l'autre en 640x400 par le même procédé.

je parle au passé car grace à css je suis parvenu à utiliser l'image
originale directement, et même en tenant compte de l'oreintation de l'image.

Le 18/03/2016 15:35, Pierre-Alain Dorange a écrit :

Vaudrait mieux Pillow, le successeur de PIL qui n'est plus mis à jour
depuis 2009.
Pillow est plutot bien compatible PIL (même classes)
<https://pillow.readthedocs.org/en/3.1.x/>

merci bien pour cette URL d'autant que, contrairement à ce que j'ai dit
précédemment, je vais peut-être garder des vignettes en 250x188.

car j'affiche l'arborescence de mon dossier photo classé par jours.

c'est quand même plus rapide de charger + de 50 vignettes que 50
originaux qui peuvent peser jusqu'à 10 Mo...

bien sûr, à chaque fois que je visite un répertoire (donc une date genre
/path/to/photos/2016/03/19) j'enregistre le résultat d'imagemagick dans
un dossier "thumbs" unique pour l'instant (toutes mes photos sont
préfixées par leur date (ie. 2016_03_04__16_55_18__DSC_0001.JPG) au
moment où je les importe.

Aujourd'hui si ils n'existent pas encore dans le dossier "thumbs" sont
réalisés à la volée par ImageMagic, c'est relativement lent.

Aussi je penser à un autre mode de fonctionnement, je réaliserai les
thumbs quand j'importe les photos.

Concernant "Pillow" je regarderai si ça vaut le coup de basculer sur lui
au lieu d'ImageMagic, mon critère étant le temps d'éxécution.

Y a t'il quelque part des benchmarks ImageMagic/Pillow ?

Le 18/03/2016 15:35, Pierre-Alain Dorange a écrit :

Vaudrait mieux Pillow, le successeur de PIL qui n'est plus mis à jour
depuis 2009.
Pillow est plutot bien compatible PIL (même classes)
<https://pillow.readthedocs.org/en/3.1.x/>

bon je viens de faire deux tests (à partir de la page :
<https://pillow.readthedocs.org/en/3.1.x/handbook/tutorial.html>)

il faudrait que j'apprenne python et Pillow ))

question, y a t'il sous python un équivalent de exiftool ?

j'ai besoin de lire l'Orientation de l'image pour en faire une vignette
dans le bon sens...

Pierre-Alain Dorange :

Pierre Maurette <maurette.pierre@free.fr> wrote:

C'est très lent, surtout quand un utilisateur attend un affichage. Je
vais peut-être voir à remplacer ImageMagick->convert par un équivalent
en Python (PIL ?).

Vaudrait mieux Pillow, le successeur de PIL qui n'est plus mis à jour
depuis 2009.
Pillow est plutot bien compatible PIL (même classes)
<https://pillow.readthedocs.org/en/3.1.x/>

Merki. Il est possible que ce soit déjà ce qui est installé, selon les
sites.
J'ai regardé également du coté de "epeg", son portage epeg-cffi. Comme
j'ai besoin d'un nombre très restreint de fonctions (1 et demi,
peut-être redressement et mise en vignette de taille connue) j'en suis
à envisager une paire de binaires. J'ai dans un coin un travail sur
l'orientation lossless, versions jpegtran et bidouillage crade.
Je regarderai également s'il y a moyen, en acceptant des vignettes "un
peu trop grandes", d'utiliser du resize sans décodage (jpegran ?).


--
Pierre Maurette