Automatischer Screenshot, SVG und Pattern

[m.]

Mahlzeit, ich erzeuge ein SVG-Bild, das dann im Browser per CSS unterschiedliche Farben bekommt. Per JS-Hack ist das Bild als Raw-SVG im Quelltext einer HTML-Seite erzeugt durch PHP.

	"use strict";
	$(document).ready(function(){
		/**
		 * SVG in RAW-Daten umschreiben
		 */
		$('img.svg').each(function(){
			var $img = $(this),
			imgID = $img.attr('id'),
			imgClass = $img.attr('class'),
			imgURL = $img.attr('src');

			$.get(imgURL, function(data) {
				// Get the SVG tag, ignore the rest
				var $svg = $(data).find('svg');

				// Add replaced image’s ID to the new SVG
				if(typeof imgID !== 'undefined') {
					$svg = $svg.attr('id', imgID);
				}

				// Add replaced image’s classes to the new SVG
				if(typeof imgClass !== 'undefined') {
					$svg = $svg.attr('class', imgClass + ' replaced-svg');
				}

				// Remove any invalid XML tags as per http://validator.w3.org
				$svg = $svg.removeAttr('xmlns:a');

				// Replace image with new SVG
				$img.replaceWith($svg);
			}, 'xml');
		});

Dann mach ich Screenshots per phantomjs, was bei Farben problemlos klappt.

Was nicht funktioniert, wenn ich im SVG Pattern definiere und dann per

			fill: url(#pattern);
			stroke: url(#pattern);

das Pattern als Füllfarbe zuweisen will. Im Chromium und Chrome wird es richtig angezeigt (FF und Opera geht auch glaub ich), was nicht geht, ist per phantomjs, da ist die Füllung schwarz. Alles unter LMDE 2, alle Pakete aktuell.

Da phantomjs per Webkit rendert, sollte es doch eigentlich klappen. Die aufgerufene URL ist immer idetisch, egal ob phantomjs oder Browser.

Ok, nach diesen Ausführungen jetzt meine Frage:

Wer kann mir sagen, wie ich das Problem löse? Gerne auch ein anderes Programm für Screenshots, wichtig ist nur, dass ich alles per Shell-Script aufrufen kann. Momentan muss ich die Screenshots mit Patterns per Hand machen und das kostet Zeit und macht keinen Spass.

thx4hlp

[mermshaus]

Interessehalber gefragt: Kannst du nicht das SVG-Bild einfach abspeichern oder so?

[m.]

Mahlzeit,

Interessehalber gefragt: Kannst du nicht das SVG-Bild einfach abspeichern oder so?

Klar könnte ich. Hilft mir nur nix, weil ich ein PNG brauche. Mit SVG kommen nicht alle Browser zurecht, in der Form wie ich sie benötige, da bleibt nur der Fallback auf PNG.

[mermshaus]

Es sollte möglich sein, das SVG zu PNG zu konvertieren, ohne einen „Screenshot“ machen zu müssen. Das scheint mir prinzipiell der weniger komplexe Workflow zu sein.

• https://encrypted.google.com/search?hl=en&q=convert svg to png console

Sorry für die Google-Suche. Kann gerade kein Tool empfehlen und bin allgemein etwas annoyed, weil heutzutage gefühlt jede C-Software voller krasser Exploits ist.

[m.]

Mahlzeit,

Es sollte möglich sein, das SVG zu PNG zu konvertieren, ohne einen „Screenshot“ machen zu müssen. Das scheint mir prinzipiell der weniger komplexe Workflow zu sein.

Danke für den Tip, das Problem ist, ich hab kein Tool gefunden, das zum einen Patterns rendert und sich zum anderen scripten lässt.

[mermshaus]

Kannst du eine Beispiel-SVG-Datei irgendwo hochladen? Optimalerweise vielleicht auch noch mit einem PNG-Screenshot oder so dazu, damit man weiß, wie sie korrekt aussehen sollte. Sicher ist sicher. Dann könnte man mal probieren.

Ich würde zuerst zu so was wie convert (aus dem ImageMagick-Toolset) tendieren.

• https://www.imagemagick.org/script/command-line-processing.php

Ganz am Rande:

Wobei meine Beschwerde über C-Software da vielleicht etwas pauschal war, aber leider auch keine reine Übertreibung:

• https://imagetragick.com/

Ich glaube zwar nicht, dass bei deiner Anwendung ein realistisches Angriffsszenario besteht, aber de facto würde eben eine SVG-Grafik an deinen Server übertragen (via Ajax). Die wäre aus Serversicht gewissermaßen Nutzereingabe. Andererseits müsste man da als Angreifer dann aber natürlich auch erst mal was injiziert bekommen, was wohl sehr sehr unwahrscheinlich ist.

Na ja, damit kann man sich später noch befassen.

[m.]

Mahlzeit,

Ich würde zuerst zu so was wie convert (aus dem ImageMagick-Toolset) tendieren.

Wenn Convert das könnte, würde ich das machen, die Verarbeitung der Screenshots mache ich bereits damit

Ich glaube zwar nicht, dass bei deiner Anwendung ein realistisches Angriffsszenario besteht, aber de facto würde eben eine SVG-Grafik an deinen Server übertragen (via Ajax).

Bei mir wird nichts auf nen Server übertragen, ausser die fertigen Bilder

[Mitleser]

Wer kann mir sagen, wie ich das Problem löse?

Keine Idee. Wie Du schon schreibst, ist das komisch, weil Webkit...

Gerne auch ein anderes Programm für Screenshots, wichtig ist nur, dass ich alles per Shell-Script aufrufen kann. Momentan muss ich die Screenshots mit Patterns per Hand machen und das kostet Zeit und macht keinen Spass.

Viel Spaß ;-)

[m.]

Mahlzeit,

Viel Spaß ;-)

Danke, da werde ich mal testen. Im Chromium läuft es ja, vielleicht klappt es mit CEF dann auch :)

[m.]

Mahlzeit,

nur, falls es jemanden interessiert, offensichtlich werden bei SVG die Patterns nicht gerendert, wenn es per Javascript aufgerufen wird. Damit fallen alle Möglichkeiten wie PhantomJS und Co aus.

Ich habe mir jetzt ein Bash-Script geschrieben, das Chromium öffnet, einen Screenshot macht, nächste URL aufruft, Screenshot .... usw.

Das ganze habe ich per xdotool umgesetzt und es sind, inkl. Debug-Ausgabe, 70 Zeilen Code für die Fernsteuerung.

Wen es interressiert:

#!/bin/bash

URL="http://mod.andoria/shirts/shirt-images.php?pic="

# Alte Dateien löschen
rm ./images/*.png
# exit

# Farben Fotografieren
./shot.sh $1

# Chrome starten
chromium $URL"0" &

for COUNT in 0 1 2 3 4; do
	TITLE="Shirt-Images"
	WINDOWID1=""

	while [ "$WINDOWID1" = "" ]; do
		echo "Prüfe ..."
		WINDOWID1=$(xdotool search --name "$TITLE")
	done

	# echo $WINDOWID1
	# exit;

	sleep 0.5

	# Screenshot
	echo $WINDOWID1
	xdotool windowactivate $WINDOWID1
	xdotool key "alt+Print"

	# Dateinamen eingeben
	TITLE="Bildschirmfoto speichern"
	WINDOWID2=""

	while [ "$WINDOWID2" = "" ]; do
		echo "Prüfe ..."
		WINDOWID2=$(xdotool search --name "$TITLE")
	done
	echo $WINDOWID2
	xdotool windowactivate $WINDOWID2
	xdotool key "$COUNT"
	xdotool key "KP_Enter"
	# exit;

	# nächste Seite aufrufen
	echo "Bild: $COUNT"

	if [ $COUNT == 4 ]; then
		COUNT=0
	else
		COUNT=$(($COUNT + 1))
	fi

	xdotool windowactivate $WINDOWID1
	xdotool key "alt+d"
	xdotool type "$URL$COUNT"
	xdotool key "KP_Enter"
done

# Chrome schliessen
echo Chrome schliessen
xdotool key "ctrl+F4"

# Bilder zuschneiden
./crop.sh $1

echo Bearbeitung abgeschlossen