Wie speichere ich ein Bild von iframe unter HTML5 Canvas?

Question

Ich versuche eine Webseite auf meiner Leinwand aufzurufen, auf der ich Notizen zeichnen oder hinzufügen kann. Jetzt möchte ich einen Screenshot machen, wo die Zeichnung mit der Webseite als Hintergrund gespeichert wird.

Ich rief eine URL in iframe hinter der Leinwand (mit Z-Index) Ich kann nur das Bild, das ich auf der Leinwand und nicht die Webseite, die ich angerufen habe, zu speichern.

Bitte helfen Sie, wie ich es zur Arbeit bringen kann. Gibt es eine Möglichkeit, eine URL in meiner Arbeitsfläche aufzurufen?

Answer 1

Dies wurde bereits in diesem Beitrag beantwortet: Capture HTML Canvas as gif/jpg/png/pdf? - Sie können die Leinwand speichern, aber das Rendern anderer Seiten wäre ein Sicherheitsloch. Was Sie tun könnten - führen Sie ein serverseitiges Skript aus, das beim Empfang einer URL ein herunterladbares Screenshot erzeugt.

Here is the rationale direkt von Mozilla-Quellcode kommt (Mozilla fügt eine drawWindow Methode Leinwand Kontext):

// 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)

Answer 2

einen Ansatz, der die Webseite auf dem Server mit einer Art von Webkit Instanz zu machen wäre soll funktionieren. Qt verfügt über einen, den Sie verwenden können, sodass Sie ein Befehlszeilenskript erstellen können, das eine URL annimmt, es in seinem nicht-gui-Browser rendert und dann ein Bild speichert und das Bild zurückgibt.

Die Qt Webkit docs sind hier https://trac.webkit.org/wiki/QtWebKit

Dann wird in der clientseitigen Anwendung, das gerenderte Bild herunterzuladen, und fügen Sie sie unter Ihren gerenderte Bilder auf die Leinwand.

Ein schwieriger Teil wäre es, die aktuelle Position Ihrer Leinwand in Bezug auf die Seite zu berechnen und diese dem gerenderten Bild zu entsprechen.