How to save image of iframe underneath HTML5 canva

问题:

I am trying to call a webpage on my canvas on which I can draw or add notes. Now I want to take a screenshot where the drawing is saved with the webpage as background.

I called a url in iframe behind the canvas (using z-index) I can save only the image which I draw on canvas and not the webpage which I called.

Please help how I can get it to work. Is there any way I can call a url within my canvas?

回答1:

This was already answered in this post: Capture HTML Canvas as gif/jpg/png/pdf? - You can save the canvas, but rendering other pages would be a security hole. What you could do - run a server-side script that upon receiving an URL produces a downloadable screenshot image.

Here is the rationale coming directly from Mozilla source code (Mozilla adds a drawWindow method to canvas context):

// We can't allow web apps to call this until we fix at least the
// following potential security issues:
// -- rendering cross-domain IFRAMEs and then extracting the results
// -- rendering the user's theme and then extracting the results
// -- rendering native anonymous content (e.g., file input paths;
// scrollbars should be allowed)

回答2:

An approach which should work would be to render the webpage on the server using some kind of webkit instance. Qt has one that you can use, so you could create a command line script which would take a URL, render it in its non-gui browser, and then save an image, returning the image.

The Qt webkit docs are here https://trac.webkit.org/wiki/QtWebKit

Then, in the client-side application, download the rendered image, and add it to the canvas beneath your rendered images.

One tricky part would be to work out the current position of your canvas in relation to the page and to get this to correspond to the rendered image.