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.
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.
You can use the html2canvas library to save an image. I've prepared the following demo for you:
HTML:
<div id="welcome">
<h1>Hello world!</h1>
</div>
<hr>
<div id="screenshot"></div>
JavaScript:
var content = document.getElementById('welcome')
, screenshot = document.getElementById('screenshot');
html2canvas(content, {
onrendered: function(canvas) {
screenshot.appendChild(canvas);
}
});
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://yourapp.com")
http = Net::HTTP.new(uri.host, uri.port)
request = Net::HTTP::Post.new(uri.request_uri)
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:
input
to type in which site you want to capture the screen and a button
to send the request to the server (Rails); button
, send the value of input
to the server - asynchronously, with AJAX - and use it to work with URI.parse
; 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
; 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.
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'
Phantomjs.run('./path/to/script.js') # => retorna stdout