비트 맵에서`pixelized 'SVG 이미지를 만드는 방법은?

Question

16x16 비트 맵을 가지고 있고 이미지 픽셀의 색상으로 16x16 사각형을 포함하는 SVG를 만들고 싶습니다. 이것을 달성하기위한 쉬운 방법이 있습니까?

현재 나의 생각은 파이썬과 PIL을 사용하여 비트 맵 이미지를 읽고 해당 객체가있는 SVG 이미지 파일을 동적으로 생성하는 방향으로 이동합니다. 그러나 이것은 조금 서투른 느낌으로 바퀴를 다시 발명하는 것과 같습니다.

더 좋은 방법이 있나요?

Answer 1

출력이 SVG가 될 필요가 없다면 HTML5 Canvas를 사용하여 클라이언트 측 이미지의 픽셀을 샘플링하고 (컨텍스트에서 getImageData()을 사용하여) 사용자가 자체 크기 조정 한 영상. 또는 SVG가 필요한 경우 Canvas를 사용하여 이미지 샘플링을 한 다음 각 픽셀에 대해 SVG에 <rect/> 요소를 작성하여 절차 적으로 사용할 수 있습니다.

나는 이것을 작성하는 방법을 볼 수 있도록 an example using just HTML Canvas로 작성했습니다. 한마디로 : 당신이 정말로 관여 SVG 필요한 경우

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; 

, 나는 동적으로 생성 예를 쓰기 드리겠습니다.

: 좋아, 나는 재미와 연습을 위해서 an SVG version을 만들었습니다. :) 옆으로 (질문의 초기 오독에서)로

this demo file from ASVG3는 SVG Examples Page 임의의 벡터 데이터에 픽셀 화를 만들기 위해 여러 가지 효과의 일부 복잡한 합성을 사용하는 방법을 오래된 보여 그. 죄송 합니다만 데모는 Chrome에로드되지 않으며 (현재 단종 된) Adobe SVG Viewer을 요구하도록 하드 와이어되어 있습니다.