如何从位图创建"像素化"SVG图像？

Question

我有一个16x16的位图,想要创建一个包含16x16方块的SVG,其中包含图像像素的颜色.有没有一种简单的方法来实现这一目标？

我目前的想法是使用Python和PIL读取位图图像并使用相应的对象动态创建SVG图像文件.但这感觉有点笨拙,就像重新发明轮子一样.

有一个更好的方法吗？

Answer 1

如果您不需要输出为SVG,我建议使用HTML5 Canvas,您可以在其中对客户端图像的像素进行采样(getImageData()在上下文中使用),然后绘制您自己的高级图像.或者,如果您需要SVG,您仍然可以使用Canvas进行图像采样,然后<rect/>在SVG中为每个像素使用程序创建的元素.

我只使用HTML Canvas编写了一个示例,因此您可以看到如何执行此操作.简而言之:

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;

如果您真的需要SVG,我很乐意写一个动态生成的示例.

编辑:好的,我已经创建了一个SVG版本,只是为了娱乐和练习.:)

另外(从最初误读你的问题)来自ASVG3的这个演示文件,他们的旧SVG示例页面显示了如何使用许多不同效果的复杂合成来创建任意矢量数据的像素化.不幸的是,这个演示版没有在Chrome中加载,因为它已经硬连线需要(现已停用)的Adobe SVG Viewer.