Как создать "пиксельное" изображение SVG из растрового изображения? - PullRequest
Новая
       7

Как создать "пиксельное" изображение SVG из растрового изображения?

7 голосов
/ 02 февраля 2011

У меня есть растровое изображение 16x16 и я хочу создать SVG, который содержит квадраты 16x16 с цветами пикселей изображения. Есть ли простой способ добиться этого?

Мои нынешние мысли направлены на использование Python и PIL для чтения растрового изображения и динамического создания файла изображения SVG с соответствующими объектами. Но это кажется немного неуклюжим и похоже на изобретение колеса.

Есть ли лучший способ сделать это?

1 Ответ

23 голосов
/ 03 февраля 2011

Если вам не нужен вывод в формате SVG, я бы предложил использовать HTML5 Canvas, где вы можете сэмплировать пиксели изображения на стороне клиента (используя getImageData() в контексте), а затем нарисовать свой собственныймасштабированное изображение.Или, если вам нужен SVG, вы все равно можете использовать Canvas для выборки изображений, а затем использовать процедурные <rect/> элементы в SVG для каждого пикселя.

Я написал пример, использующий только HTMLCanvas , чтобы вы могли видеть, как это сделать.Вкратце: 

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 .

.
...