हम Node.js पर सुंदर एसवीजी प्लेसहोल्डर तैयार करते हैं

प्लेसहोल्डर्स के रूप में एसवीजी छवियों का उपयोग करना एक बहुत अच्छा विचार है, विशेष रूप से हमारी दुनिया में, जब लगभग सभी साइटों में चित्रों का एक गुच्छा होता है जिसे हम अतुल्यकालिक रूप से लोड करने की कोशिश कर रहे हैं। जितने अधिक चित्र और वे उतने ही अधिक भिन्न होते हैं, विभिन्न समस्याओं के होने की संभावना उतनी ही अधिक होती है, इस तथ्य से शुरू होती है कि उपयोगकर्ता को यह समझ में नहीं आता है कि वहां क्या लोड किया गया है, और चित्रों को लोड करने के बाद पूरे इंटरफ़ेस के प्रसिद्ध कूद के साथ समाप्त होता है। विशेष रूप से आपके फोन से खराब इंटरनेट पर - यह कई स्क्रीन पर दूर उड़ सकता है। यह ऐसे क्षणों में है कि स्टब्स बचाव के लिए आते हैं। उनके उपयोग के लिए एक और विकल्प सेंसरशिप है। ऐसे समय होते हैं जब आपको उपयोगकर्ता से एक तस्वीर छिपाने की आवश्यकता होती है, लेकिन मैं पृष्ठ की समग्र शैली, रंग और उस स्थान को बनाए रखना चाहता हूं, जहां चित्र रहता है।

लेकिन अधिकांश लेखों में, हर कोई सिद्धांत के बारे में बात करता है, कि इन सभी ठूंठ चित्रों को इन-लाइन पृष्ठों में सम्मिलित करना अच्छा होगा, और आज हम व्यवहार में देखेंगे कि कैसे आप Node.js. का उपयोग करके उन्हें अपने स्वाद और रंग में उत्पन्न कर सकते हैं। हम एसवीजी छवियों से हैंडलबार टेम्प्लेट बनाएंगे और उन्हें अलग-अलग तरीकों से भरेंगे, रंग भरने के लिए साधारण ढाल या त्रिकोणासन, वोरोनोई मोज़ेक और फिल्टर का उपयोग करके। सभी कार्यों को चरणों में हल किया जाएगा। मेरा मानना ​​है कि यह आलेख उन शुरुआती लोगों के लिए दिलचस्प होगा जो इस बात में रुचि रखते हैं कि यह कैसे किया जाता है और कार्यों के विस्तृत विश्लेषण की आवश्यकता होती है, लेकिन अनुभवी डेवलपर्स कुछ विचारों को पसंद कर सकते हैं।

ट्रेनिंग

शुरुआत करने के लिए, हम एनपीएम नामक सभी प्रकार के सामानों के एक अथाह भंडार में जाएंगे। चूंकि हमारी ठूंठ छवियों को बनाने का कार्य सर्वर साइड पर (या यहां तक ​​कि डेवलपर की मशीन पर, यदि हम अधिक या कम स्थैतिक साइट के बारे में बात कर रहे हैं), तो हम समयपूर्व अनुकूलन के साथ सौदा नहीं करेंगे। हम हर उस चीज से जुड़ेंगे जो हमें पसंद है। तो, हम npm init मंत्र के साथ शुरू करते हैं और निर्भरता के चयन के साथ आगे बढ़ते हैं।

शुरुआत के लिए, यह ColorThief है । आप शायद उसके बारे में पहले ही सुन चुके हैं। एक अद्भुत पुस्तकालय जो चित्र में सबसे अधिक इस्तेमाल किए जाने वाले रंगों के रंग पैलेट को अलग कर सकता है। हमें बस शुरुआत के लिए कुछ ऐसा चाहिए।

 npm i --save color-thief 

लिनक्स के तहत इस पैकेज को स्थापित करते समय, एक समस्या थी - कुछ गायब कैरो पैकेज, जो एनपीएम निर्देशिका में नहीं है। इस अजीब त्रुटि को कुछ पुस्तकालयों के विकास संस्करणों को स्थापित करके हल किया गया था:

 sudo apt install libcairo2-dev libjpeg-dev libgif-dev 

यह उपकरण कैसे काम करता है, इस प्रक्रिया को देखा जाएगा। लेकिन आरजीबी से हेक्स के रंग प्रारूप को परिवर्तित करने के लिए आरजीबी-हेक्स पैकेज को तुरंत कनेक्ट करना बेहतर नहीं होगा, जो इसके नाम से स्पष्ट है। हम ऐसे सरल कार्यों के साथ साइकिल चलाने में संलग्न नहीं होंगे।

 npm i --save rgb-hex 

प्रशिक्षण के दृष्टिकोण से, इस तरह की चीजों को स्वयं लिखना उपयोगी है, लेकिन जब कोई काम करने वाले न्यूनतम प्रोटोटाइप को जल्दी से इकट्ठा करने का कार्य होता है, तो एनपीएम कैटलॉग से जो कुछ भी होता है वह एक अच्छा विचार है। एक टन समय बचता है।

प्लग के लिए सबसे महत्वपूर्ण मापदंडों में से एक अनुपात है। उन्हें मूल छवि के अनुपात से मेल खाना चाहिए। तदनुसार, हमें इसके आकार को जानने की आवश्यकता है। हम इस समस्या को हल करने के लिए छवि-आकार पैकेज का उपयोग करेंगे।

 npm i --save image-size 

चूंकि हम चित्रों के विभिन्न संस्करणों को बनाने की कोशिश करेंगे और वे सभी एसवीजी प्रारूप में होंगे, एक तरह से या उनके लिए टेम्पलेट्स का एक और सवाल उठेगा। आप निश्चित रूप से जेएस में पैटर्न स्ट्रिंग्स के साथ चकमा दे सकते हैं, लेकिन यह सब क्यों? "सामान्य" टेम्पलेट इंजन लेना बेहतर है। उदाहरण के लिए, हैंडलबार । सरल और स्वादिष्ट, हमारे कार्य के लिए सिर्फ सही होगा।

 npm i --save handlebars 

हम तुरंत इस प्रयोग के लिए किसी प्रकार की जटिल वास्तुकला की व्यवस्था नहीं करेंगे। हम main.js फ़ाइल बनाते हैं और वहां अपनी सभी निर्भरताएँ आयात करते हैं, साथ ही फाइल सिस्टम के साथ काम करने के लिए एक मॉड्यूल भी बनाते हैं।

 const ColorThief = require('color-thief'); const Handlebars = require('handlebars'); const rgbHex = require('rgb-hex'); const sizeOf = require('image-size'); const fs = require('fs'); 

ColorThief को अतिरिक्त इनिशियलाइज़ेशन की आवश्यकता है

 const thief = new ColorThief(); 

हमारे द्वारा कनेक्ट की गई निर्भरता का उपयोग करना, "एक स्क्रिप्ट पर एक तस्वीर अपलोड करना" और "इसका आकार प्राप्त करना" की समस्याओं को हल करना मुश्किल नहीं है। मान लीजिए कि हमारे पास एक चित्र है ।jpg:

 const image = fs.readFileSync('1.jpg'); const size = sizeOf('1.jpg'); const height = size.height; const width = size.width; 

Node.js से अपरिचित लोगों के लिए, यह कहने योग्य है कि फ़ाइल सिस्टम से संबंधित लगभग सभी चीजें समकालिक या समकालिक रूप से हो सकती हैं। तुल्यकालिक विधियों के लिए, नाम के अंत में "सिंक" जोड़ा जाता है। हम उनका उपयोग करेंगे ताकि अनावश्यक जटिलता का सामना न करें और हमारे दिमाग को नीले रंग से बाहर न करें।

पहले उदाहरण पर चलते हैं।

रंग भरना

शुरू करने के लिए, हम सरल आयत को भरने की समस्या को हल करेंगे। हमारी तस्वीर के तीन पैरामीटर होंगे - चौड़ाई, ऊंचाई और रंग भरें। हम एक आयत के साथ एक एसवीजी छवि बनाते हैं, लेकिन इन मूल्यों के बजाय हम ब्रैकेट के जोड़े और उन फ़ील्ड्स के नामों को प्रतिस्थापित करते हैं जिनमें स्क्रिप्ट से प्रेषित डेटा होगा। आप शायद पहले से ही इस वाक्यविन्यास को पारंपरिक HTML के साथ देख चुके हैं (उदाहरण के लिए, Vue कुछ इसी तरह का उपयोग करता है), लेकिन कोई भी SVG छवि के साथ इसका उपयोग करने की जहमत नहीं उठाता है - टेम्पलेट इंजन को परवाह नहीं है कि यह लंबे समय में क्या होगा। पाठ वह और अफ्रीका में पाठ है।

 <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' height='{{ height }}' width='{{ width }}'> <rect x='0' y='0' height='100' width='100' fill='{{ color }}' /> </svg> 

इसके अलावा ColorThief हमें सबसे आम रंग में से एक देता है, उदाहरण में यह ग्रे है। टेम्पलेट का उपयोग करने के लिए, हम इसके साथ फाइल पढ़ते हैं, हैंडलबार कहते हैं ताकि यह लाइब्रेरी इसे संकलित करे और फिर हम तैयार एसवीजी स्टब के साथ एक पंक्ति उत्पन्न करें। टेम्पलेट इंजन ही सही स्थानों पर हमारे डेटा (रंग और आकार) को प्रतिस्थापित करता है।

 function generateOneColor() { const rgb = thief.getColor(image); const color = '#' + rgbHex(...rgb); const template = Handlebars.compile(fs.readFileSync('template-one-color.svg', 'utf-8')); const svg = template({ height, width, color }); fs.writeFileSync('1-one-color.svg', svg, 'utf-8'); } 

यह केवल एक फ़ाइल के लिए परिणाम लिखने के लिए बनी हुई है। जैसा कि आप देख सकते हैं, एसवीजी के साथ काम करना बहुत अच्छा है - सभी फाइलें पाठ हैं, आप उन्हें आसानी से पढ़ और लिख सकते हैं। परिणाम एक आयत चित्र है। कुछ भी दिलचस्प नहीं है, लेकिन कम से कम हमने यह सुनिश्चित किया कि दृष्टिकोण काम कर रहा था (पूर्ण स्रोतों का एक लिंक लेख के अंत में होगा)।

धीरे-धीरे भरें

ग्रेडिएंट का उपयोग करना अधिक दिलचस्प दृष्टिकोण है। यहां हम चित्र से कुछ सामान्य रंगों का उपयोग कर सकते हैं और एक से दूसरे में एक चिकनी संक्रमण कर सकते हैं। यह कभी-कभी उन साइटों पर पाया जा सकता है जो चित्रों के लंबे रिबन लोड करते हैं।

हमारे SVG टेम्प्लेट को अब बहुत ही ढाल के साथ विस्तारित किया गया है। एक उदाहरण के लिए हम सामान्य रैखिक ढाल का उपयोग करेंगे। हम केवल दो मापदंडों में रुचि रखते हैं - शुरुआत में रंग और अंत में रंग:

 <defs> <linearGradient id='my-gradient' x1='0%' y1='0%' x2='100%' y2='0%' gradientTransform='rotate(45)'> <stop offset='0%' style='stop-color:{{ startColor }};stop-opacity:1' /> <stop offset='100%' style='stop-color:{{ endColor }};stop-opacity:1' /> </linearGradient> </defs> <rect x='0' y='0' height='100' width='100' fill='url(#my-gradient)' /> 

रंग स्वयं उसी ColorThief का उपयोग करके प्राप्त किए जाते हैं। इसके संचालन के दो तरीके हैं - या तो यह हमें एक प्राथमिक रंग देता है, या हमारे द्वारा निर्दिष्ट रंगों की संख्या के साथ एक पैलेट। काफी आराम से। ढाल के लिए, हमें दो रंगों की आवश्यकता है।

अन्यथा, यह उदाहरण पिछले एक के समान है:

 function generateGradient() { const palette = thief.getPalette(image, 2); const startColor = '#' + rgbHex(...palette[0]); const endColor = '#' + rgbHex(...palette[1]); const template = Handlebars.compile(fs.readFileSync('template-gradient.svg', 'utf-8')); const svg = template({ height, width, startColor, endColor }); // . . . 

इस तरह, आप सभी प्रकार के ग्रेडिएंट बना सकते हैं - जरूरी नहीं कि रैखिक। लेकिन फिर भी यह एक उबाऊ परिणाम है। यह किसी प्रकार का मोज़ेक बनाने के लिए बहुत अच्छा होगा जो दूरस्थ रूप से मूल छवि जैसा होगा।

आयत मोज़ेक

आरंभ करने के लिए, चलो बस बहुत सारी आयतें बनाते हैं और उन्हें पैलेट से रंगों से भरते हैं जो वही पुस्तकालय हमें देगा।

हैंडलबार्स कई अलग-अलग चीजें कर सकते हैं, विशेष रूप से इसमें चक्र हैं। हम उसे निर्देशांक और रंगों की एक सरणी देंगे, और फिर वह इसका पता लगाएगा। हम सिर्फ प्रत्येक में टेम्पलेट में अपनी आयत लपेटते हैं:

 {{# each rects }} <rect x='{{ x }}' y='{{ y }}' height='11' width='11' fill='{{ color }}' /> {{/each }} 

तदनुसार, स्क्रिप्ट में ही, अब हमारे पास एक पूर्ण रंग पैलेट है, एक्स / वाई निर्देशांक के माध्यम से लूप है और पैलेट से यादृच्छिक रंग के साथ एक आयत बनाते हैं। सब कुछ काफी सरल है:

 function generateMosaic() { const palette = thief.getPalette(image, 16); palette.forEach(function(color, index) { palette[index] = '#' + rgbHex(...color); }); const rects = []; for (let x = 0; x < 100; x += 10) { for (let y = 0; y < 100; y += 10) { const color = palette[Math.floor(Math.random() * 15)]; rects.push({ x, y, color }); } } const template = Handlebars.compile(fs.readFileSync('template-mosaic.svg', 'utf-8')); const svg = template({ height, width, rects }); // . . . 

जाहिर है, मोज़ेक, हालांकि तस्वीर के रंग के समान है, लेकिन रंगों की व्यवस्था के साथ, सब कुछ वैसा नहीं है जैसा हम चाहते हैं। इस क्षेत्र में ColorThief की क्षमताएं सीमित हैं। मैं एक मोज़ेक प्राप्त करना चाहूंगा जिसमें मूल तस्वीर का अनुमान लगाया जाएगा, और न केवल एक ही रंग के कम या ज्यादा ईंटों का एक सेट।

पच्चीकारी में सुधार

यहां हमें थोड़ा और गहराई में जाना है और चित्र में पिक्सेल से रंग प्राप्त करना है ...

चूंकि हम स्पष्ट रूप से कंसोल में एक कैनवास नहीं रखते हैं, जहां से आमतौर पर हमें यह डेटा मिलता है, हम सहायता का उपयोग गेट-पिक्सेल पैकेज के रूप में करेंगे। वह एक तस्वीर के साथ बफर से आवश्यक जानकारी खींच सकता है जो हमारे पास पहले से है।

 npm i --save get-pixels 

यह कुछ इस तरह दिखेगा:

 getPixels(image, 'image/jpg', (err, pixels) => { // . . . }); 

हमें एक ऑब्जेक्ट मिलता है जिसमें डेटा फ़ील्ड होता है - पिक्सेल की एक सरणी, उसी तरह जैसे कि हम कैनवास से प्राप्त करते हैं। आपको याद दिला दूं कि निर्देशांक (X, Y) द्वारा पिक्सेल का रंग प्राप्त करने के लिए, आपको सरल गणना करने की आवश्यकता है:

 const pixelPosition = 4 * (y * width + x); const rgb = [ pixels.data[pixelPosition], pixels.data[pixelPosition + 1], pixels.data[pixelPosition + 2] ]; 

इस प्रकार, प्रत्येक आयत के लिए हम रंग पैलेट से नहीं, बल्कि सीधे चित्र से ले सकते हैं, और इसका उपयोग कर सकते हैं। आपको कुछ इस तरह मिलेगा (मुख्य बात यह नहीं भूलना चाहिए कि तस्वीर में निर्देशांक हमारे "सामान्यीकृत" 0 से 100 तक भिन्न हैं):

 function generateImprovedMosaic() { getPixels(image, 'image/jpg', (err, pixels) => { if (err) { console.log(err); return; } const rects = []; for (let x = 0; x < 100; x += 5) { const realX = Math.floor(x * width / 100); for (let y = 0; y < 100; y += 5) { const realY = Math.floor(y * height / 100); const pixelPosition = 4 * (realY * width + realX); const rgb = [ pixels.data[pixelPosition], pixels.data[pixelPosition + 1], pixels.data[pixelPosition + 2] ]; const color = '#' + rgbHex(...rgb); rects.push({ x, y, color }); } } // . . . 

अधिक सुंदरता के लिए, हम "ईंटों" की संख्या को थोड़ा बढ़ा सकते हैं, उनके आकार को कम कर सकते हैं। चूंकि हम इस आकार को टेम्प्लेट में नहीं पास करते हैं (निश्चित रूप से, यह छवि की चौड़ाई या ऊंचाई के समान पैरामीटर बनाने के लायक होगा), हम टेम्पलेट में ही आकार मान बदल देंगे:

 {{# each rects }} <rect x='{{ x }}' y='{{ y }}' height='6' width='6' fill='{{ color }}' /> {{/each }} 

अब हमारे पास एक मोज़ेक है जो वास्तव में मूल छवि की तरह दिखता है, लेकिन एक ही समय में कम जगह परिमाण का क्रम लेता है।

यह मत भूलो कि GZIP पाठ फ़ाइलों में ऐसे दोहराए जाने वाले अनुक्रमों को अच्छी तरह से संपीड़ित करता है, ताकि जब ब्राउज़र में स्थानांतरित किया जाए, तो इस तरह के पूर्वावलोकन का आकार और भी छोटा हो जाएगा।

लेकिन चलो आगे बढ़ते हैं।

ट्राईऐन्ग्युलेशंस

आयताकार अच्छे हैं, लेकिन त्रिकोण आमतौर पर बहुत अधिक रोचक परिणाम देते हैं। तो आइए त्रिकोण के ढेर से मोज़ेक बनाने की कोशिश करें। इस मुद्दे पर अलग-अलग दृष्टिकोण हैं, हम Delaunay त्रिकोण का उपयोग करेंगे:

 npm i --save delaunay-triangulate 

एल्गोरिथ्म का मुख्य लाभ जो हम उपयोग करेंगे, वह यह है कि यह जब भी संभव हो, बहुत तेज और अप्रिय कोणों के साथ त्रिकोण से बचता है। एक सुंदर छवि के लिए, हमें संकीर्ण और लंबी त्रिकोण की आवश्यकता नहीं है।

यह उन क्षणों में से एक है जब यह जानना उपयोगी होता है कि हमारे क्षेत्र में गणितीय एल्गोरिदम मौजूद हैं और उनमें क्या अंतर है। उनके सभी कार्यान्वयनों को याद रखना आवश्यक नहीं है, लेकिन कम से कम यह जानना उपयोगी है कि Google क्या है।

हमारे कार्य को छोटे लोगों में विभाजित करें। सबसे पहले आपको त्रिकोण के कोने के लिए अंक उत्पन्न करने की आवश्यकता है। और उनके निर्देशांक में कुछ यादृच्छिकता जोड़ना अच्छा होगा:

 function generateTriangulation() { // . . . const basePoints = []; for (let x = 0; x <= 100; x += 5) { for (let y = 0; y <= 100; y += 5) { const point = [x, y]; if ((x >= 5) && (x <= 95)) { point[0] += Math.floor(10 * Math.random() - 5); } if ((y >= 5) && (y <= 95)) { point[1] += Math.floor(10 * Math.random() - 5); } basePoints.push(point); } } const triangles = triangulate(basePoints); // . . . 

त्रिकोण के साथ सरणी की संरचना (हमारी मदद करने के लिए कंसोल) की समीक्षा करने के बाद, हम अपने आप को उन बिंदुओं पर पाते हैं जिन पर हम पिक्सेल का रंग लेंगे। आप बस त्रिकोण के कोने के निर्देशांक के लिए अंकगणितीय माध्य की गणना कर सकते हैं। फिर हम चरम सीमा से अतिरिक्त बिंदुओं को स्थानांतरित करते हैं ताकि वे कहीं भी बाहर न निकलें और, वास्तविक प्राप्त न हो, सामान्यीकृत निर्देशांक न हों, हमें पिक्सेल रंग मिलता है, जो त्रिकोण का रंग बन जाएगा।

 const polygons = []; triangles.forEach((triangle) => { let x = Math.floor((basePoints[triangle[0]][0] + basePoints[triangle[1]][0] + basePoints[triangle[2]][0]) / 3); let y = Math.floor((basePoints[triangle[0]][1] + basePoints[triangle[1]][1] + basePoints[triangle[2]][1]) / 3); if (x === 100) { x = 99; } if (y === 100) { y = 99; } const realX = Math.floor(x * width / 100); const realY = Math.floor(y * height / 100); const pixelPosition = 4 * (realY * width + realX); const rgb = [ pixels.data[pixelPosition], pixels.data[pixelPosition + 1], pixels.data[pixelPosition + 2] ]; const color = '#' + rgbHex(...rgb); const points = ' ' + basePoints[triangle[0]][0] + ',' + basePoints[triangle[0]][1] + ' ' + basePoints[triangle[1]][0] + ',' + basePoints[triangle[1]][1] + ' ' + basePoints[triangle[2]][0] + ',' + basePoints[triangle[2]][1]; polygons.push({ points, color }); }); 

यह केवल एक स्ट्रिंग में वांछित बिंदुओं के निर्देशांक को इकट्ठा करने के लिए रहता है और इसे रंग के साथ प्रसंस्करण के लिए हैंडलबार्स में भेज देता है, जैसा कि हमने पहले किया था।

टेम्पलेट में ही, अब हमारे पास आयत नहीं होंगे, लेकिन बहुभुज:

 {{# each polygons }} <polygon points='{{ points }}' style='stroke-width:0.1;stroke:{{ color }};fill:{{ color }}' /> {{/each }} 

त्रिकोणासन एक बहुत ही रोचक चीज है। त्रिकोणों की संख्या बढ़ाने से आप केवल सुंदर चित्र प्राप्त कर सकते हैं, क्योंकि कोई भी यह नहीं कहता है कि हमें उन्हें केवल स्टब्स के रूप में उपयोग करना चाहिए।

वोरोनोई की मोज़ेक

एक समस्या है, पिछले एक का दर्पण - वोरोनोई का एक विभाजन या मोज़ेक । हमने इसे पहले से ही शेडर्स के साथ काम करते समय इस्तेमाल किया है, लेकिन यहां यह उपयोगी भी हो सकता है।

अन्य ज्ञात एल्गोरिदम की तरह, हमारे पास एक तैयार किया गया कार्यान्वयन है:

 npm i --save voronoi 

आगे की कार्रवाई बहुत कुछ वैसी ही होगी जैसी हमने पिछले उदाहरण में की थी। एकमात्र अंतर यह है कि अब हमारे पास एक अलग संरचना है - त्रिकोण की एक सरणी के बजाय हमारे पास एक जटिल वस्तु है। और विकल्प थोड़े अलग हैं। अन्यथा, सब कुछ लगभग समान है। आधार बिंदुओं की एक सरणी उसी तरह से उत्पन्न होती है, इसे छोड़ें ताकि लिस्टिंग को बहुत लंबा न बनाया जा सके:

 function generateVoronoi() { // . . . const box = { xl: 0, xr: 100, yt: 0, yb: 100 }; const diagram = voronoi.compute(basePoints, box); const polygons = []; diagram.cells.forEach((cell) => { let x = cell.site.x; let y = cell.site.y; if (x === 100) { x = 99; } if (y === 100) { y = 99; } const realX = Math.floor(x * width / 100); const realY = Math.floor(y * height / 100); const pixelPosition = 4 * (realY * width + realX); const rgb = [ pixels.data[pixelPosition], pixels.data[pixelPosition + 1], pixels.data[pixelPosition + 2] ]; const color = '#' + rgbHex(...rgb); let points = ''; cell.halfedges.forEach((halfedge) => { const endPoint = halfedge.getEndpoint(); points += endPoint.x.toFixed(2) + ',' + endPoint.y.toFixed(2) + ' '; }); polygons.push({ points, color }); }); // . . . 

नतीजतन, हमें उत्तल बहुभुज का मोज़ेक मिलता है। इसके अलावा एक बहुत ही दिलचस्प परिणाम।

सभी संख्याओं को पूर्णांक या कम से कम दशमलव स्थानों के लिए राउंड करना उपयोगी है। एसवीजी में अत्यधिक सटीकता यहां पूरी तरह से अनावश्यक है, यह केवल चित्रों के आकार में वृद्धि करेगा।

धुंधली पच्चीकारी

अंतिम उदाहरण हम देखेंगे कि एक धुंधली मोज़ेक है। हमारे हाथों में एसवीजी की सारी शक्ति है, इसलिए फिल्टर का उपयोग क्यों नहीं किया जाता है?

आयतों की पहली मोज़ेक लें और उसमें मानक "कलंक" फ़िल्टर जोड़ें:

 <defs> <filter id='my-filter' x='0' y='0'> <feGaussianBlur in='SourceGraphic' stdDeviation='2' /> </filter> </defs> <g filter='url(#my-filter)'> {{# each rects }} <rect x='{{ x }}' y='{{ y }}' height='6' width='6' fill='{{ color }}' /> {{/each }} </g> 

परिणाम हमारी तस्वीर का एक धुंधला, "सेंसर" पूर्वावलोकन है, यह लगभग 10 गुना कम जगह लेता है (संपीड़न के बिना), वेक्टर और किसी भी स्क्रीन के आकार तक फैला है। उसी तरह, आप हमारे बाकी मोज़ाइक को धुंधला कर सकते हैं।

आयतों के नियमित मोज़ेक के लिए इस तरह के फ़िल्टर को लागू करते समय, "जीप प्रभाव" निकल सकता है, इसलिए यदि आप उत्पादन में ऐसा कुछ उपयोग करते हैं, विशेष रूप से बड़े आकार के चित्रों के लिए, तो यह धुंधला नहीं लगाने के लिए अधिक सुंदर हो सकता है, लेकिन वोरोनोई विभाजन के लिए।

एक निष्कर्ष के बजाय

इस लेख में, हमने देखा कि कैसे आप Node.js पर सभी प्रकार के SVG स्टब चित्र बना सकते हैं और यह सुनिश्चित कर सकते हैं कि यह इतना मुश्किल काम नहीं है यदि आप हाथ से सब कुछ नहीं लिखते हैं, और यदि संभव हो तो, तैयार किए गए मॉड्यूल को इकट्ठा करें। गीथूब पर पूर्ण स्रोत उपलब्ध हैं ।