Question

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

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

有更好的方法吗？

Answer 1

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

我写了an example using just 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，我很乐意写一个动态生成的例子。~~

修改：好的，我创建an SVG version只是为了娱乐和练习。：）

暂时（从最初误读你的问题）this demo file from ASVG3他们的旧SVG Examples Page展示了如何使用许多不同效果的复杂合成来创建任意矢量数据的像素化。不幸的是，这个演示版没有在Chrome中加载，已经硬连线需要（现已停用）Adobe SVG Viewer。

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

1 个答案: