बिटमैप से 'पिक्सेलकृत' एसवीजी छवि कैसे बनाएं?

Question

मेरे पास 16x16 बिटमैप है और मैं एक एसवीजी बनाना चाहता हूं जिसमें छवि के पिक्सेल के रंगों के साथ 16x16 वर्ग शामिल हैं। क्या इसे हासिल करने का कोई आसान तरीका है?

मेरे वर्तमान विचार बिटमैप छवि को पढ़ने और गतिशील रूप से संबंधित वस्तुओं के साथ एक एसवीजी छवि फ़ाइल बनाने के लिए पायथन और पीआईएल का उपयोग करने की दिशा में जाते हैं। लेकिन यह थोड़ा गड़बड़ महसूस करता है और पहिया को फिर से शुरू करने जैसा लगता है।

क्या ऐसा करने का कोई बेहतर तरीका है?

Answer 1

यदि आपको एसवीजी होने के आउटपुट की आवश्यकता नहीं है, तो मैं एक HTML5 कैनवास का उपयोग करने का सुझाव दूंगा जहां आप छवि क्लाइंट-साइड के पिक्सल का नमूना दे सकते हैं (संदर्भ पर getImageData() का उपयोग करके) और फिर अपना स्वयं का स्केल करें छवि। या, यदि आपको एसवीजी की आवश्यकता है, तो आप छवि नमूनाकरण के लिए अभी भी कैनवास का उपयोग कर सकते हैं और फिर प्रत्येक पिक्सेल के लिए एसवीजी में प्रक्रियात्मक रूप से बनाए गए <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; 

तुम सच में एसवीजी शामिल की जरूरत है, मैं एक उदाहरण गतिशील उत्पन्न कि लिखने के लिए खुशी होगी।

संपादित करें: ठीक है, मैंने केवल मजेदार और अभ्यास के लिए an SVG version बनाया है। :)

एक अलग रूप में (अपने प्रश्न का एक आरंभिक ग़लत व्याख्या से) के रूप में this demo file from ASVG3 अपने पुराने SVG Examples Page दिखाता है कि मनमाने ढंग से वेक्टर डेटा पर पिक्सेलेशन बनाने के लिए कई अलग अलग प्रभाव के कुछ जटिल संयोजन का उपयोग करें। दुर्भाग्यवश डेमो क्रोम में लोड नहीं होता है, जिसे (अब बंद कर दिया गया) Adobe SVG Viewer की आवश्यकता के लिए हार्डवार्ड किया गया है।