graphics - 如何从位图创建 `pixelized' SVG 图像？

Question

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

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

有一个更好的方法吗？

Answer 1

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

我写了 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 .