Créer une image d'un DIV en JavaScript (GIF/PNG)

Question

Je me demande s'il existe une bibliothèque JavaScript disponible qui me permettrait de générer une image à partir du contenu d'un DIV. Fondamentalement, cela est nécessaire pour un code d'impression côté serveur, qui doit imprimer un arrière-plan à partir du navigateur. Ce que je voudrais finalement faire serait d'encoder le contenu DIV au format PNG et afficher les données codées avec l'opération d'impression.

Des idées, si c'est possible?

[EDIT] Ce que j'ai est une application de cartographie où les données de fond proviennent d'un serveur d'images directement dans un navigateur DIV (Think Google Maps). Ce div est l'arrière-plan de mes données principales. Lorsque vous appuyez sur Imprimer, le serveur génère un PDF à partir des données qu'il connaît, mais ne sait rien des données d'arrière-plan du navigateur. Ce que j'aimerais vraiment, c'est être capable de fournir au serveur l'image de fond des navigateurs d'une manière ou d'une autre!

Cheers, Ro

Answer 1

I pense que j'ai trouvé un moyen de le faire

1) Lorsque l'utilisateur appuie sur Imprimer, interrogez le DIV
2) Les images sur cette DIV sont générées par l'API OpenLayers
3) Prenez l'URL de chaque image
4) Prenez l'emplacement sur l'écran de chaque image
5) Traduire l'emplacement de l'écran dans un endroit du monde réel (je API pour cela)
6) Dans le cadre de l'impression, envoyez toutes les URL de l'image avec leurs extensions réelles
7) Autoriser le serveur à re-demander les images et les dessiner dans leurs emplacements appropriés.

Answer 2

Vous pouvez créer une balise d'image à partir de JavaScript, mais pas l'image réelle en elle: JS n'a pas de commandes pour allouer de la mémoire pour le bitmap et il n'a pas de commandes à rendre quelque chose à ce sujet.

La solution habituelle est d'avoir un générateur de rapport sur le serveur qui crée l'image sur demande. Regardez BIRT ou JasperReports. D'après votre commentaire, la solution est simple: examinez le DIV, trouvez l'URL de l'image de fond et remplacez le DIV par un élément IMG. Placez l'URL dans l'attribut SRC, puis imprimez.

Answer 3

Je ne pense vraiment pas que ce soit possible sur le navigateur, certainement pas sans une sorte de plugin.

Pourriez-vous envoyer des informations de coordonnées ou quelque chose au serveur Web pour que le serveur Web demande la même image de carte au serveur d'images? .

Answer 4

images Génération n'a été possible que dans IE5 :(Ensuite, pour des raisons de sécurité, il a été abandonné, je suis toujours languissons

Answer 5

Peut-être qu'il est possible avec le Canvas.

MDN - Drawing Graphics with Canvas

Answer 6

Est-ce que cela doit être fait du côté du navigateur? J'ai vu où vous pouvez faire un appel côté serveur et le type MIME sur la réponse du serveur est le type d'image.Je pense que l'exemple auquel je pense était pour les jpeg encodés en b64 dans un db, mais le processus devrait être le même. La réponse serait les données qui sont actuellement dans votre DIV. Désolé si je suis loin de la base.

Answer 7

Question très intéressante.

En fait, je résoudre ce problème en utilisant ajax (positions des images de transfert sur le serveur, le serveur crée une image à partir de morceaux, enregistrer et envoyer URL au client). Je n'aime pas beaucoup cette solution mais je ne connais pas encore les autres.