चमक प्रभाव, संभावित कुंडलित कर्नेल/मैट्रिक्स

Question

मैं एक HTML कैनवास करने के लिए एक PNG छवि ड्राइंग रहा हूँ और मैं इससे पहले कि यह कैनवास को blitted है कुंडलित फिल्टर छवि डेटा के खिलाफ निष्पादित करने की अनुमति देने के लिए एक फिल्टर प्रणाली को लागू किया है का उपयोग करना ।

क्या किसी को कोई विचार है कि एक ठोस कर्नेल/मैट्रिक्स का उपयोग करके चमक प्रभाव कैसे बनाया जाए (मुझे यकीन नहीं है कि शब्दावली क्या है लेकिन मैं इनके बारे में बात कर रहा हूं: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/) या अन्य माध्यमों जैसे कि globalCompositeOperation (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)?

मुझे पता है कि आप कम अस्पष्टता और स्केल की गई छवि से शुरू कर सकते हैं, फिर छवि को थोड़ा सा स्केल करते समय अस्पष्टता बढ़ाएं। यह एक प्रकार का चमक प्रभाव बनाने के लिए काम करता है लेकिन केवल एक छवि के किनारे के आसपास।

एक आदर्श दुनिया में यह चमक एक माध्यमिक चमक बनावट के प्रयोग है कि चित्र के क्षेत्रों को नामित करने के लिए सक्षम होने के लिए बहुत अच्छा होगा। किसी भी परिदृश्य पर कोई विचार? :)

Answer 1

आशा है कि निम्नलिखित जो कुछ आप करना चाहते थे, उसके साथ निम्नलिखित है, मुझे लगता है कि यह बहुत अच्छी तरह से निकला है। इसलिए मैंने the article से फ़िल्टर लाइब्रेरी कोड का उपयोग किया, और लाइब्रेरी के लिए अभी एक नया चमक फ़िल्टर बनाया, क्योंकि उसका कोड शुरू करने के लिए बहुत अच्छा किया गया था। यहां एक Live Demo कार्रवाई में चमक प्रभाव दिखा रहा है।

इस फिल्टर कोड है कि आप पुस्तकालय

Filters.glow = function(pixels, passes, image, glowPasses){ 
     for(var i=0; i < passes; i++){ 
      pixels = Filters.convolute(pixels, 
       [1/9, 1/9, 1/9, 
       1/9, 1/9, 1/9, 
       1/9, 1/9, 1/9 ]); 
     } 

     var tempCanvas = document.createElement("canvas"), 
      glowCanvas = document.createElement("canvas"), 
      tCtx = tempCanvas.getContext("2d"), 
      gCtx = glowCanvas.getContext("2d"); 

     tempCanvas.width = glowCanvas.width = pixels.width; 
     tempCanvas.height = tempCanvas.height = pixels.height; 

     tCtx.putImageData(pixels, 0, 0); 
     gCtx.drawImage(image, 0, 0); 

     gCtx.globalCompositeOperation = "lighter"; 

     for(i = 0; i < glowPasses; i++){ 
      gCtx.drawImage(tempCanvas,0,0); 
     } 

     return Filters.getPixels(glowCanvas); 
    } 

में जोड़ने के लिए की जरूरत है और यह कैसे आप ऊपर फिल्टर का उपयोग होता है।

var glowImage = document.images[1], 
    glowMask = document.images[0], 
    c = document.getElementById("canvas"), 
    ctx = c.getContext("2d"); 

window.onload = function() { 
    var pData = Filters.filterImage(Filters.glow, glowImage, 5, glowMask, 2); 
    c.width = pData.width; 
    c.height = pData.height; 
    ctx.putImageData(pData, 0, 0); 
} 

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

This article चमक प्रभाव बनाने पर एक बहुत अच्छा संसाधन है, यह भी जहां मुझे ग्राफिक्स मिला है ताकि वे मेरे परिणामों का परीक्षण कर सकें।