如何从位图创建`像素化'的SVG图像？

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。