HTML5 कैनवास में बिलिनियर फ़िल्टरिंग के साथ पिक्सेल विरूपण

इस पोस्ट में मैं विशेष पुस्तकालयों और shaders का उपयोग किए बिना 2 डी-कैनवस में "शुद्ध" जावास्क्रिप्ट का उपयोग करके छवि की पिक्सेल विरूपण की एक सरल विधि का वर्णन करना चाहता हूं, सीधे छवि पिक्सल तक पहुंच बनाकर। मुझे उम्मीद है कि यह सामान्य विकास के लिए और कुछ समस्याओं को हल करने के लिए दिलचस्प और उपयोगी होगा।

कैनवस और पिक्सल

मैं कैनवस ऑब्जेक्ट का पूरी तरह से वर्णन नहीं करूंगा, इसके लिए प्रलेखन है। हमें उस चीज़ पर ध्यान देना चाहिए जिसकी हमें ज़रूरत है। पहले 2 डी संदर्भ मिल रहा है:

var context = canvas.getContext('2d'); 

यह संदर्भ दो-आयामी ग्राफिक्स के साथ बहुत कुछ कर सकता है, जिसमें दिए गए क्षेत्र में pies के लिए सीधी पहुंच प्राप्त करना शामिल है:

 var pixels = context.getImageData(x, y, width, height); context.putImageData(pixels, x, y); 

ये ऐसे पिक्सल हैं जिन्हें हमें बदलना होगा। हम केवल 32-बिट छवियों पर विचार करेंगे। ऐसी छवि का प्रत्येक पिक्सेल चार बाइट्स, प्रति चैनल बाइट (R, G, B, A) का प्रतिनिधित्व करता है। पिक्सेल इन बाइट्स का एक आयामी आयाम हैं। डेटा क्षेत्र (एक्स, वाई - निर्देशांक, सी - चैनल, बी - मूल्य) के माध्यम से उन तक पहुंच है:

 pixels.data[(x+y*height)*4+c] = b; 

विरूपण समारोह

जिस छवि पर हम विचार कर रहे हैं उसका विरूपण एक ऐसा कार्य है जिसके पैरामीटर परिणामी छवि के निर्देशांक हैं (बाद में हम उन्हें पिक्सेल कहेंगे), और परिणाम मूल छवि के निर्देशांक हैं (इसके बाद हम उन्हें टेक्सल्स कहेंगे, क्योंकि वास्तव में मूल छवि एक बनावट है, और निर्देशांक हैं ये फ्लोटिंग पॉइंट नंबर हैं)। इस प्रकार, छवि को बढ़ाने के लिए कार्य लगभग निम्नानुसार है:

 var zoom = function(px, py) { return { 'x': (px+width/2)*0.5, 'y': (py+height/2)*0.5 } } 

आइए अन्य विकृतियों के लिए कुछ और कार्य करें। मैं प्रत्येक एल्गोरिथ्म का वर्णन करने में एक बिंदु नहीं देखता; गणित काफी सरल है और खुद के लिए बोलता है।

 var twirl = function(px, py) { var x = px-width/2; var y = py-height/2; var r = Math.sqrt(x*x+y*y); var maxr = width/2; if (r>maxr) return { 'x':px, 'y':py } var a = Math.atan2(y,x); a += 1-r/maxr; var dx = Math.cos(a)*r; var dy = Math.sin(a)*r; return { 'x': dx+width/2, 'y': dy+height/2 } } 

 var reflect = function(px, py) { if (py<height/2) return { 'x': px, 'y': py } var dx = (py-height/2)*(-px+width/2)/width; return { 'x': px+dx, 'y': height-py } } 

 var spherize = function(px,py) { var x = px-width/2; var y = py-height/2; var r = Math.sqrt(x*x+y*y); var maxr = width/2; if (r>maxr) return { 'x':px, 'y':py } var a = Math.atan2(y,x); var k = (r/maxr)*(r/maxr)*0.5+0.5; var dx = Math.cos(a)*r*k; var dy = Math.sin(a)*r*k; return { 'x': dx+width/2, 'y': dy+height/2 } } 

हैश टेबल

इसलिए, हमें यह पता लगाने का अवसर मिला कि प्रत्येक पिक्सेल के लिए कौन से टेक्सल्स लेने हैं। लेकिन हर बार एक ही निर्देशांक की गणना न करें? यह बहुत तनावपूर्ण होगा। बचाव के लिए एक हैश टेबल आता है। इस प्रकार, हम प्रत्येक छवि आकार के लिए एक बार संपूर्ण परिवर्तन मानचित्र की गणना करते हैं, और भविष्य में हम प्रत्येक परिवर्तन के लिए इसका उपयोग करते हैं:

 //    .   ,      . var setTranslate = function(translator) { if (typeof translator === 'string') translator = this[translator]; for (var y=0; y<height; y++) { for (var x=0; x<width; x++) { var t = translator(x, y); map[(x+y*height)*2+0] = Math.max(Math.min(tx, width-1), 0); map[(x+y*height)*2+1] = Math.max(Math.min(ty, height-1), 0); } } } 

बिलिनियर फ़िल्टरिंग

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

 var colorat = function(x, y, channel) { return texture.data[(x+y*height)*4+channel]; } for (var j=0; j<height; j++) { for (var i=0; i<width; i++) { var u = map[(i+j*height)*2]; var v = map[(i+j*height)*2+1]; var x = Math.floor(u); var y = Math.floor(v); var kx = ux; var ky = vy; for (var c=0; c<4; c++) { bitmap.data[(i+j*height)*4+c] = (colorat(x, y , c)*(1-kx) + colorat(x+1, y , c)*kx) * (1-ky) + (colorat(x, y+1, c)*(1-kx) + colorat(x+1, y+1, c)*kx) * (ky); } } } 

निष्कर्ष

बस इतना ही। यह एक अलग ऑब्जेक्ट में इसे लपेटने के लिए रहता है, इसे कोड में जोड़ें और देखें कि क्या होता है।
JSFiddle पर वास्तविक समय में खेलते हैं ।
क्रोम और फ़ायरफ़ॉक्स में काम करता है। दूसरों में मैं अभी तक जाँच नहीं कर सकता, अगर यह काम नहीं करता है, तो एक व्यक्तिगत में लिखें।
आपका ध्यान देने के लिए धन्यवाद।