Wie erstelle ich ein "pixelisiertes" SVG-Bild aus einer Bitmap?

7

Ich habe eine 16x16 Bitmap und möchte ein SVG erstellen, das 16x16 Quadrate mit den Farben der Pixel des Bildes enthält. Gibt es einen einfachen Weg, dies zu erreichen?

Meine aktuellen Gedanken gehen in die Richtung der Verwendung von Python und PIL, um das Bitmap-Bild zu lesen und dynamisch eine SVG-Bilddatei mit den entsprechenden Objekten zu erstellen. Aber das fühlt sich etwas unbeholfen an und macht das Rad neu erfinden.

Gibt es einen besseren Weg, dies zu tun?

    
hochl 02.02.2011, 14:52
quelle

1 Antwort

23

Wenn Sie nicht möchten, dass die Ausgabe SVG ist, würde ich vorschlagen, ein HTML5-Canvas zu verwenden, wo Sie die Pixel des Bildes clientseitig abtasten können (mit getImageData() im Kontext) und dann Ihre eigenen skaliertes Bild Oder, wenn Sie SVG benötigen, können Sie weiterhin Canvas für die Bildabtastung verwenden und dann für jedes Pixel die prozedural erstellten <rect/> -Elemente in SVG verwenden.

Ich habe ein Beispiel mit HTML-Canvas geschrieben, damit Sie sehen können, wie das geht. Kurz gesagt:

%Vor%

Wenn Sie wirklich SVG brauchen, würde ich gerne ein Beispiel schreiben, das das dynamisch generiert.

Bearbeiten : OK, ich habe eine SVG-Version nur zum Spaß und zum Üben erstellt . :)

Als Nebenaspekt (von einem anfänglichen Missverständnis Ihrer Frage) diese Demo-Datei von ASVG3 Ihre alte SVG-Beispielseite zeigt, wie Sie mit einem komplexen Compositing aus vielen verschiedenen Effekten beliebige Pixelierungen erstellen können Vektordaten. Leider wird die Demo in Chrome nicht geladen, da wir fest damit beauftragt wurden, den (jetzt nicht mehr erhältlichen) Adobe SVG Viewer .

    
Phrogz 02.02.2011, 21:04
quelle

Tags und Links