graphics - una - vectorizar imagen gratis

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

Question

Tengo un mapa de bits de 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 hacer esto?

Answer 1

Si no necesita que la salida sea SVG, le sugiero que use 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 imagen a escala ascendente. O, si necesita SVG, aún 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 un ejemplo utilizando solo HTML Canvas para que pueda ver cómo hacerlo. En breve:

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, me gustaría escribir un ejemplo que genere dinámicamente eso.

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

Como un aparte (de una lectura incorrecta inicial de su pregunta) este archivo de demostración de ASVG3 su antigua página de ejemplos SVG muestra cómo usar una composición compleja de muchos efectos diferentes para crear pixelación en datos vectoriales arbitrarios. Lamentablemente, la demostración no se carga en Chrome, ya que está cableada para requerir el Adobe SVG Viewer (ahora descontinuado).