Raphael JS und Screenshot auf Div

Question

Ich habe ein Div mit einem Hintergrundbild und 2 Bilder (C1 und C2) auf diesem Hintergrund. c1 und c2 verwenden die Raphael JS-Klasse. Ich möchte ein PNG-Bild (oder JPG) mit meinem Hintergrundbild und C1 und C2 herunterladen.

Ich habe versucht, Canvas2Image auf meinem Hauptdiv zu verwenden, aber ich sehe nicht C1 und C2, wenn ich Bild herunterladen.

Haben Sie eine Idee? Eine Klasse, um einen div screenshot mit allen Komponenten auf diesem div zu machen? Alle

Vielen Dank,

Answer 1

Warum die "Bilder" fehlen

RaphaelJS zieht mit SVG so Ihre c1, c2 Zeichnungen sind nicht wirklich Bilder - sie SVG sind.

Das Problem ist, dass SVG gezeichnet auf HTML5 Canvas eine Sicherheitseinschränkung auslöst, die wiederum den Export der Leinwand in ein Bild (context.toDataURL ist deaktiviert, wenn die Leinwand ist verdorben).

Dies bedeutet Canvas2Image kann nicht Ihre c1, c2 Bild-Svgs anzeigen.

Eine Abhilfe

Zuerst Ihren Hintergrund auf Ihrer Haupt-Leinwand ziehen.

context.drawImage(bkImage,0,0); 

Zweitens konvertieren Sie Ihre RaphaelJS Zeichnungen in ein realen Bilder (nicht SVG) und sie auf der großen Leinwand ziehen.

1. Exportieren Sie eine Ihrer RaphaelJS-Zeichnungen (entweder C1 oder C2) als SVG. Eine Bibliothek, die nach SVG exportiert, ist Raphael.Export

2. Konvertieren Sie das SVG (von # 1) in html5 Canvas Zeichenbefehle. [Siehe # 3 für eine Möglichkeit, Svg in Canvas-Befehle zu konvertieren].

3. Zeichnen Sie die Befehle (von # 2) auf ein separates HTML5 Canvas. Eine Bibliothek, die SVG in Canvas-Befehle (== # 2) konvertiert und sie ebenfalls nach Canvas (== # 3) zeichnet, ist canvg.

4. Erstellen Sie ein ImageObject aus der separaten Zeichenfläche (aus # 3). Sie können den nativen Befehl Html5 Canvas canvas.toDataURL() verwenden, um eine Daten-URL zu erstellen, die als image.src für ein neues imageObject verwendet werden kann.

   var c1 = new Image; 
   c1.src = secondCanvas.toDataURL(); 
   

5. ziehen, dass reelles Bild auf Ihre Haupt-Leinwand.

   context.drawImage(c1,0,0); 
   

Repeat # 1-5 mit c2.

Schließlich, da Sie nun sicherheitskonforme Bilder (nicht SVG) haben, können Sie Ihren Canvas-Inhalt direkt in ein Bild exportieren (wiederum mit context.toDataURL). Sie werden Canvas2Image nicht einmal benötigen, wenn Ihr div nur das Hintergrundbild plus c1, c2 enthält.

Eine mögliche einfachere Alternative

SVG und Canvas Zeichenbefehle sind sehr ähnlich. Wenn c1, c2 nicht auf nicht zeichnenden RaphaelJS-Methoden beruhen, können Sie relativ einfach c1, c2 mit nativen Canvas-Zeichnungsbefehlen zeichnen (Raphael ganz umgehen).

Ein zukünftig alternativ

Sowohl SVG und Canvas haben bemerkenswert ähnliche Zeichnung Fähigkeiten.

Aber SVG fügt vollständige DOM-Funktionen - vollständige HTML-Element Ereignisse & Eigenschaften. Und Canvas konzentriert sich auf Rendering-Geschwindigkeit - Rendering Hunderte von Formen mit 60 Bildern pro Sekunde.

Die Organisation, die empfiehlt, wie Browser (W3C) erhält den RFP über making SVG & Canvas drawings compatible

jedoch SVG-Canvas Interaktivität derzeit nicht verfügbar ist.