Zeigt Ihnen, warum Sie Pixelierung niemals als Schwärzungstechnik verwenden sollten. Eine ausführlichere Beschreibung, wie das funktioniert, finden Sie in meinem Blogbeitrag hier.
Installieren Sie die Abhängigkeiten:
npm install
Dann beginnen Sie mit
npm start
Das ist es.
Dies ist etwas manuell und überhaupt nicht rationalisiert. Ich denke, Sie werden sehen, warum. Wenn jemand Lust hat, diesen Prozess mehr in die App zu integrieren, bin ich ganz offen. Wie sehe ich aus, ein Electron-Entwickler? Aber ja, hier ist es:
Beschneiden Sie Ihr Bild auf den verpixelten Bereich. Keine Ränder, kein anderer Text. Ersetzen Sie secret.png
damit. Ich empfehle, es in GiMP zu tun.
Notieren Sie sich die Blockgröße (es ist nur die Größe jedes pixelierten Blocks). Ersetzen Sie blockSize
im Code dadurch.
Holen Sie sich genau das richtige CSS. Dies ist der schwierigste und zeitaufwändigste Teil. Geben Sie es in test.html
ein und zeigen Sie es in Chrome an. Optimieren Sie es, bis Sie einen Beispieltext so genau wie möglich reproduzieren können. Achten Sie besonders auf den Wort- und Buchstabenabstand. Wenn es schief geht, wird alles durcheinander geraten. Auch die Schriftstärke, sonst wird alles zu hell oder zu dunkel. Ich kann nicht genug betonen, wie wichtig dieser Schritt ist, da das Ganze wirklich davon abhängt, dass man die geschwärzten Zeichen korrekt reproduzieren kann.
Bestimmen Sie, welchen Zeichensatz Sie ausprobieren möchten. Es befindet sich oben in preload.ts
.
Drücken Sie die Go-Taste und sehen Sie, ob es funktioniert!