¿Cómo crear una imagen SVG `pixelizada 'desde un mapa de bits?

Question

Tengo un mapa de bits 16x16 y quiero crear un SVG que contenga 16x16 cuadrados con los colores de los píxeles de la imagen. ¿Hay alguna manera fácil de lograr esto?

Mis pensamientos actuales van en la dirección de usar Python y PIL para leer la imagen de mapa de bits y crear dinámicamente un archivo de imagen SVG con los objetos correspondientes. Pero esto se siente un poco torpe y como reinventar la rueda.

¿Hay una mejor manera de hacerlo?

Answer 1

Si no necesita que la salida sea SVG, le sugiero que utilice un lienzo HTML5 donde puede muestrear los píxeles de la imagen del lado del cliente (usando getImageData() en el contexto) y luego dibujar su propia escala ascendente imagen. O bien, si necesita SVG, puede usar Canvas para el muestreo de imágenes y luego usar elementos <rect/> creados en procedimientos en SVG para cada píxel.

He escrito an example using just HTML Canvas para que pueda ver cómo hacerlo. En resumen:

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; 

Si realmente necesita SVG involucrados, estaría feliz de escribir un ejemplo que genera dinámicamente eso.

Editar: OK, he creado an SVG version solo por diversión y práctica. :)

Como acotación al margen (de una mala lectura inicial de su pregunta) this demo file from ASVG3 su antiguo SVG Examples Page muestra cómo utilizar algunas de composición compleja de muchos efectos diferentes para crear pixelación en los datos vectoriales arbitrarios. Lamentablemente, la demostración no se carga en Chrome, ya que se ha cableado para requerir el (ahora descontinuado) Adobe SVG Viewer.