开发者

How to do a screen capture of content on web page/join 2 images

I have a page where I am using Raphael.js to actually allow user to move a dot around the canvas which has a background image. What I am trying to do is to capture the end image of the canvas where I'll be able to see where the user placed the dot after the user clicks on a 'confirm position' button. I've thought of two methods, however I am not too sure of how to execute them.

Method 1: Just capture the canvas as an image. Somehow this isn't possible with Javascript alone and I'm not too sure if Raphael has a built in function to allow this. I also read about exporting the svg xml file and pass it through the a library like 'Batik' however I'm not exactly sure how to do that. The tutorials I've read are really confusing.

Method 2: To use the coordinates of the dot and overlay a dot image that I already have onto the background image and s开发者_JS百科ave it as an image.

Please advice and I hope I've been clear.


You can achieve this server-side:

  • get the SVG code with JavaScript
  • send it to a PHP script on your server with XHR
  • have PHP save the SVG to a file and use Inkscape to convert it in one command:
    inkscape in.svg -e out.png -w 300 -h 500
  • send back the name of the newly created file to the client
  • display a link to the picture in JavaScript

This method does not provide VML support (Internet Explorer's vector graphics format); however, you can use VectorConverter to convert VML to SVG.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜