n°12
Exporter une image d'un canvas protégé depuis Firefox
Web
1er mai 2018

Certains sites d'archive offrent à leurs visiteurs des lecteurs d'image qui permettent la visualisation d'une partie de la photo en gros plan (et donc en haute résolution) mais empêchent le téléchargement de l'image entière à cette résolution. Comme en cartographie, elle est découpée en carreaux pour empêcher d'obtenir l'adresse de l'image haute définition par l'écoute du réseau. Ces carreaux sont cependant bien réassemblés par le lecteur pour permettre la navigation en gros plan. Pour télécharger l'image complète en haute définition, on peut donc exporter une « capture » du lecteur si celui-ci est un objet <canvas>.

Je vais prendre l'exemple d'une image sur le site des Bibliothèques spécialisées de Paris. Sur ce site, on nous laisse télécharger les images mais dans une résolution inférieure que celle du <canvas>.

Avec l'Inspecteur de la barre d'outils de développement (F12) de Firefox on cherche l'élément <canvas>. Puis Clic droit dessus et « Ouvrir dans la console ». La console s'ouvre avec le nom de l'objet renseigné, généralement temp0. On copie-colle dans la console les trois lignes suivantes en prenant soin de modifier temp0 si le nom de l'objet est différent.

var d = temp0.toDataURL();
var w = window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");

On exécute, l'image extraite s'affichera dans un nouvel onglet.

Une astuce supplémentaire pour obtenir la meilleure résolution possible consiste à forcer un <canvas> de grande taille en réduisant le niveau de zoom du navigateur (Ctrl -) avant d'executer le script. Idem pour obtenir la totalité de l'image est non uniquement un gros plan.


corentin héraud-louisadat

architecte & développeur
75018 Paris
heraud-arobase-laponies-point-fr

*1992, Strasbourg.

Diplômé d'état en 2016 de l'ENSA Paris-Malaquais et de la RWTH Aachen puis habilité à maîtrise d'oeuvre en nom propre (HMONP) en 2019, j'ai travaillé pour diverses agences telles que Nicolas Reymond architectes urbanistes, Dietmar Feichtinger architectes ou Julian Breinersdorfer. Je développe également des applications pour le Web et la 3D. Vous pouvez également consulter l'archive des travaux laponies.fr ainsi que la carte des bonnes adresses.

Amis, famille et blogroll : Anaïs Héraud-Louisadat, Héraud–Baumann, Till Baumann, Anne-Claire Héraud, La Boucle.

alsace europe