Faire un sreenshot d'une div

Bonjour,

Comme le titre l'indique, je souhaiterais faire un screenshot d'une div.

Comme vous pouvez le voir dans mon image, ma div contient des tableaux, je voudrais en gros permettre à l'utilisateur d'enregistrer un screenshot de ces tableaux (au format jpeg par exemple) sur son ordinateur en cliquant sur un bouton.



J'ai cherché sur google mais j'ai pas réussi a trouver d'exemple concret ou a chaque fois c'était vraiment complexe ....

J'espere que vous pourrez m'aider =)

Prendre un screenshot en soit ça n'est pas possible, mais il existe des solutions qui, en fonction de tes connaissances risquent en effet d'être difficiles à mettre en place.

PhantomJS & similaire, qui permettent d'ouvrir une page webkit et de faire toutes sortes de choses avec, y compris enregistrer un screenshot.

GD2 ou équivalent si tu n'utilises pas Php, qui permet de générer des images depuis un programme. Pas exactement ce que tu veux, mais tu pourrais créer ton tableau directement en tant qu'image.

Des libs d'export html -> pdf ou image, pour les pdfs il y en a pas mal, côté image directement je n'en ai jamais utilisé mais ça existe peut être...

Dans tous les cas, il te faudra un script qui génère une image à partir de ta div, etc, ça va pas être ce qu'il y a de plus facile à faire...

Hello.


En plus de la réponse de HammHetfield, en JS, avec un support navigateur très limité : HTML2canvas.

Grosso modo, ça transcris le DOM d'une partie de la page pour le dessiner dans un canvas. J'éviterais personnellement, et je ferais sauter la feature, quitte à suggérer une extension de navigateur qui va bien.

Côté serveur, il y a peux-être un truc à jouer avec PhantomCSS, mais dans tous les cas, ça va être très très chiant à mettre en place, et pas forcément fiable.

Merci pour vos réponses !

mouarf ca m'a l'air vraiment complexe ouai

Parce qu'en fait, j'utilise aussi amchart pour faire des graphiques et la y a un truc incorporer expres, si je clique dessus ca me demande ou je veux enregistrer le graphique, ce qui est plutot pratique pour faire des power point et tout ca par la suite.
Je voulais donc faire la meme chose avec le tableau .... mais bon apparemment c'est pas de mon niveau :'(

Merci quand meme

tu as une solution relativement simple ici
sous réserve que tes tableaux soient regroupés en une seule image et que l'utilisateur copie le thumb généré sur son disque
Modifié par gazobu (14 Apr 2013 - 23:17)

Mes tableaux ne sont pas une image mais bien des tableaux codé en html et rempli dynamiquement suivant les filtres sélectionnés.

Ta méthode peut elle quand meme marcher ? Merci de ta réponse

pour utiliser cette méthode il te faut faire des screen-shoots des tableaux avant de les mettre en ligne
(s'ils se créent dynamiquement ça ne marchera pas)

la solution barbare, mais la plus simple, est que tu conseilles à tes utilisateurs de faire une copie d'écran

[édit] pompé sur stackoverflow.com:

I don't know of a way to 'screenshot' an element, but what you could do, is draw the the div into a canvas element, then use the HTMLCanvasElement object's toDataURL function to get a data: URI with the image's contents.
as
var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */
When the user clicks "Capture", do this:
window.open('', document.getElementById('the_canvas_element_id').toDataURL());
This will open a new tab or window with the 'screenshot', allowing the user to save it.
Modifié par gazobu (15 Apr 2013 - 00:18)

Ouai j'avais vu ca mais justement je comprend pas trop comment ca s'utilise

Dans ton exemple par exemple je comprend pas ou la variable t est utilisée ....

L'image va etre ouverte dans une nouvelle page internet en gros c'est ca ? je comprend pas aussi a quelle page elle va etre ouverte (url)....

Pourrais tu m'expliquer stp ?

InfoGeo a écrit :

Dans ton exemple par exemple je comprend pas ou la variable t est utilisée ....

t défini un canvas 2d et est utilisé par la suite pour créer le canvas

InfoGeo a écrit :

Pourrais tu m'expliquer stp ?

le principe est de créer un canvas qui contient une div
pour le reste, désolé je n'ai pas essayé

Bon ok ej vais essayer de voir par moi meme