Jak utworzyć "pixelizowany" obraz SVG z bitmapy?

Question

Mam mapę bitową 16x16 i chcę utworzyć obraz SVG zawierający 16x16 kwadratów z kolorami pikseli obrazu. Czy istnieje prosty sposób na osiągnięcie tego?

Moje obecne przemyślenia idą w kierunku użycia Pythona i PIL do odczytania obrazu bitmapy i dynamicznego utworzenia pliku obrazu SVG z odpowiednimi obiektami. Ale to wydaje się trochę niezdarne i jak wymyślanie koła.

Czy jest lepszy sposób to zrobić?

Answer 1

Jeśli nie potrzebujesz wyjścia jako SVG, sugerowałbym użycie płótna HTML5, w którym można próbkować piksele obrazu po stronie klienta (używając getImageData() w kontekście), a następnie narysować własną własną skalę obraz. Lub, jeśli potrzebujesz SVG, możesz nadal używać Canvas do próbkowania obrazu, a następnie użyć stworzonych proceduralnie elementów <rect/> w SVG dla każdego piksela.

Napisałem an example using just HTML Canvas, dzięki czemu można zobaczyć, jak to zrobić. W skrócie:

function drawPixelated(img,context,zoom,x,y){ 
    if (!zoom) zoom=4; if (!x) x=0; if (!y) y=0; 
    if (!img.id) img.id = "__img"+(drawPixelated.lastImageId++); 
    var idata = drawPixelated.idataById[img.id]; 
    if (!idata){ 
    var ctx = document.createElement('canvas').getContext('2d'); 
    ctx.width = img.width; 
    ctx.height = img.height; 
    ctx.drawImage(img,0,0); 
    idata = drawPixelated.idataById[img.id] = ctx.getImageData(0,0,img.width,img.height).data; 
    } 
    for (var x2=0;x2<img.width;++x2){ 
    for (var y2=0;y2<img.height;++y2){ 
     var i=(y2*img.width+x2)*4; 
     var r=idata[i ]; 
     var g=idata[i+1]; 
     var b=idata[i+2]; 
     var a=idata[i+3]; 
     context.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")"; 
     context.fillRect(x+x2*zoom, y+y2*zoom, zoom, zoom); 
    } 
    } 
}; 
drawPixelated.idataById={}; 
drawPixelated.lastImageId=0; 

Jeśli naprawdę potrzebujesz SVG zaangażowany, byłbym szczęśliwy napisać przykład dynamicznie generowane że.

Edytuj: OK, stworzyłem an SVG version tylko dla zabawy i ćwiczeń. :)

Jak z boku (z początkowej błędnej interpretacji swoje pytanie) this demo file from ASVG3 swoich starych SVG Examples Page pokazuje, jak korzystać z niektórych skomplikowany komponowanie wielu różnych efektów do tworzenia pixelation na dowolnych danych wektorowych. Niestety, wersja demo nie ładuje się w Chrome, ponieważ została podłączona na stałe, aby wymagać (nieaktualnej) wersji Adobe SVG Viewer.