How to draw print from a web page using backend rails?


Would it be possible to do this?

For example:

I point a page to my application , and it holds a image of the indicated page. A print.

asked by anonymous 25.07.2014 / 13:46

2 answers


You can use the html2canvas library to save an image. I've prepared the following demo for you:


<div id="welcome">
    <h1>Hello world!</h1>


<div id="screenshot"></div>


var content = document.getElementById('welcome')
    , screenshot = document.getElementById('screenshot');

html2canvas(content, {
    onrendered: function(canvas) {

jsFiddle to view.

The technique is very simple: #welcome is the element you want to capture a screenshot; #screenshot is where it will be displayed.

To achieve the effect you want, you must work in complicity with Rails. You said the following:


I point to a page for my application, and it saves an image of the indicated page. A print.

So, by my interpretation, you want to take the photo of a whole page. For this, you will need to consume the body of that page (element body ) and use it as a reference in the html2canvas (in this case, the variable content (in JavaScript) is responsible for this). See:

uri = URI.parse("")

http =, uri.port)

request =

response = http.request(request)

render json: response.body

The above code, based on here , will consume all body requested page. Then, using render json: response.body , you will be sending this body to JSON for who to request.

In summary, with a scenario:

  • Create a input to type in which site you want to capture the screen and a button to send the request to the server (Rails);
  • When you or a user clicks button , send the value of input to the server - asynchronously, with AJAX - and use it to work with URI.parse ;
  • Then the body element, which is what you need to take a photo of the page, will be stored in the response.body fragment being returned to the client through render json ;
  • Finally, in the succession of your request (of type GET , via AJAX), you call the function where the html2canvas is escopado and use the response of the request to popular the variable content ;
  • The line you should follow is more or less this. There are some adaptations you can make along the way, but the idea has been given.

    25.07.2014 / 15:29

    The answer to your question is too complex to be detailed, you need to use a task management service such as SideKiq and integrate it with the gem PhantomJS GEM , remembering that for this you will need to have PhantomJS . PhantomJS will allow you to capture these screens and for more information, see: Screen Capture Doc

    Then through GEM you can interact using:

    require 'phantomjs''./path/to/script.js') # => retorna stdout
    25.07.2014 / 15:05