2010-08-23 11 views
3

J'ai une page où j'utilise Raphael.js pour réellement permettre à l'utilisateur de déplacer un point autour de la toile qui a une image de fond. Ce que j'essaye de faire est de capturer l'image finale de la toile où je serai capable de voir où l'utilisateur a placé le point après que l'utilisateur clique sur un bouton de «confirmation de position». J'ai pensé à deux méthodes, mais je ne suis pas trop sûr de la façon de les exécuter.Comment faire une capture d'écran de contenu sur une page web/join 2 images

Méthode 1: Capturez simplement le canevas en tant qu'image. D'une certaine manière, ce n'est pas possible avec Javascript seul et je ne suis pas sûr si Raphael a une fonction intégrée pour permettre cela. Je lis aussi à propos de l'exportation du fichier svg xml et je le passe à travers une bibliothèque comme 'Batik' mais je ne suis pas sûr de la façon de le faire. Les tutoriels que j'ai lus sont vraiment déroutants.

Méthode 2: Pour utiliser les coordonnées du point et superposer une image par points que j'ai déjà sur l'image d'arrière-plan et enregistrez-le sous forme d'image.

S'il vous plaît des conseils et j'espère avoir été clair.

Répondre

0

Vous pouvez réaliser ce côté serveur:

  • obtenir le code SVG avec JavaScript
  • envoyer à un script PHP sur votre serveur avec XHR
  • ont PHP enregistrer le SVG dans un fichier et utiliser Inkscape pour le convertir en une seule commande:
    inkscape in.svg -e out.png -w 300 -h 500
  • renvoyer le nom du fichier nouvellement créé au client
  • afficher un lien à l'image en JavaScript

Cette méthode ne fournit pas de support VML (format graphique vectoriel d'Internet Explorer); Toutefois, vous pouvez utiliser VectorConverter pour convertir VML en SVG.