如何创建从位图一个'像素化'SVG图像？ [英] How to create a `pixelized' SVG image from a bitmap?

问题描述

我有一个16×16位图，并希望创建一个包含图像的像素的颜色方块16×16的SVG。有没有一种简单的方法来实现这一目标？

I have a 16x16 bitmap and want to create an SVG that contains 16x16 squares with the colors of the pixels of the image. Is there an easy way to achieve this?

我现在的想法进入使用Python和PIL读取位图图像，并动态地创建相应的对象SVG图像文件的方向。不过这感觉有点笨拙，就像重新发明轮子。

My current thoughts go into the direction of using Python and PIL to read the bitmap image and dynamically create an SVG image file with the corresponding objects. But this feels a little clumsy and like reinventing the wheel.

有没有更好的方法来做到这一点？

Is there a better way to do this?

推荐答案

如果您不需要输出为SVG，我建议使用HTML5的画布，你可以品尝到像客户端的像素（用 getImageData（）上下文），然后得出自己的按比例放大的图像。或者，如果你需要SVG，你仍然可以使用画布图像采样，然后用程序上创建＆LT; RECT /＆gt;以SVG 元素为每个像素

If you don't need the output to be SVG, I would suggest using an HTML5 Canvas where you can sample the pixels of the image client-side (using getImageData() on the context) and then draw your own up-scaled image. Or, if you need SVG, you could still use Canvas for the image sampling and then use procedurally-created <rect/> elements in SVG for each pixel.

我已经写了的，所以你可以看到如何做到这一点rel=\"nofollow\">一个例子。简而言之：

I've written an example using just HTML Canvas so you can see how to do this. In short:

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参与，我很乐意编写动态生成的一个例子。

修改：OK，我创建一个SVG版本只是为了好玩和实践。 ：）

Edit: OK, I've created an SVG version just for fun and practice. :)

的顺便说一句（从你的问题的初始误读）这个演示文件从ASVG3 旧 SVG例子网页演示如何使用一些复杂许多不同的特效合成，以创建任意矢量数据像素化。不幸的是，演示并没有在Chrome加载，被硬要求（现在已停产）的的Adobe SVG浏览器的。的

As an aside (from an initial misreading of your question) this demo file from ASVG3 their old SVG Examples Page shows how to use some complex compositing of many different effects to create pixelation on arbitrary vector data. Unfortunately the demo does not load in Chrome, having been hardwired to require the (now-discontinued) Adobe SVG Viewer.

这篇关于如何创建从位图一个'像素化'SVG图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！