JPStoreshot erstellt Store-Screenshots für Browser-Erweiterungen: ein Verlauf, dein Screenshot, eine Lupe und eine Milchglas-Textkarte. Die Glaskarte fällt allen auf. Sie war auch das Erste, was kaputtging.
backdrop-filter lässt sich nicht exportieren
Im Browser ist Milchglas eine Zeile CSS: backdrop-filter: blur(24px). Ein Screenshot-Tool muss aber ein PNG liefern. DOM-to-Image-Bibliotheken rendern das DOM neu in ein SVG oder Canvas, und backdrop-filter ist genau die Art Eigenschaft, die sie nicht zuverlässig nachbauen. Die Vorschau sah richtig aus, der Download nicht.
Deshalb nutzt Storeshot für das Motiv gar kein DOM. Eine einzige Canvas-2D-Funktion zeichnet die Editor-Vorschau, die Folien-Thumbnails und den Export. Weil alle denselben Code nutzen, stimmen Vorschau und Export Pixel für Pixel überein.
Nur weichzeichnen, was hinter der Karte liegt
Ein komplettes 1920 × 1080-Bild bei jedem Ziehen weichzuzeichnen wäre langsam. Aber nur der Bereich hinter der Karte (plus ein Rand in Größe des Blur-Radius) beeinflusst das Glas. Storeshot schneidet diesen Bereich aus und tastet ihn in Viertelauflösung ab:
// vereinfacht
const margin = blur * 2;
// … region = Kartengrenzen + Rand, auf die Folie begrenzt
sctx.drawImage(scene, region.x, region.y, region.w, region.h, 0, 0, region.w / k, region.h / k);
blurInto(cache.glass, cache.glassSmall, blur / k);Ein Blur mit Radius 24 in voller Größe ist ein Blur mit Radius 6 in Viertelgröße: 16-mal weniger Pixel und ein viel kleinerer Kernel. Das Ergebnis wieder hochzuskalieren kostet praktisch nichts, und weil es ohnehin unscharf ist, sieht bilineares Hochskalieren genauso aus wie ein Blur in voller Auflösung.
Den Blur zwischenspeichern
Der weichgezeichnete Hintergrund wird unter einem Schlüssel aus Szene, Bereich und Blur-Radius zwischengespeichert. Tippen in der Karte ändert den Schlüssel nicht, Textänderungen zeichnen also nie neu weich. Die Lupe invalidiert den Cache nur, wenn sie tatsächlich in den Hintergrund der Karte hineinreicht.
Natürlich Safari
ctx.filter = 'blur(…)' gibt es nicht überall. Storeshot erkennt das einmal (setzen, zurücklesen) und fällt sonst auf wiederholtes Herunter- und Hochskalieren zurück, was bei diesen Größen einem Gauß-Blur nahe genug kommt.
Was ich mitnehme
Wenn ein Tool eine Datei liefert, rendere ich inzwischen zuerst die Datei und mache die Vorschau zu einer Ansicht davon. Und wenn etwas teuer ist, lohnt sich die Frage, welche Pixel das Ergebnis überhaupt ändern können. Bei der Glaskarte war das ein kleiner Ausschnitt in Viertelauflösung.
