कैनवास के साथ कोडरवॉल धुंधला पृष्ठभूमि प्रभाव धुंधला

Question

coderwall.com इस पृष्ठभूमि प्रभाव को कैसे कर रहा है, जहां वे एक छोटी छवि लेते हैं, इसे धुंधला करते हैं, और इसे 100% तक व्यूपोर्ट तक आकार देते हैं। यहाँ एक उदाहरण है: https://coderwall.com/p/on5ojq

मैंने कोशिश की:

<canvas class="blur" src="https://d3levm2kxut31z.cloudfront.net/assets/locations/Mexico-1c39f581666a50a97c5130e13837ff20.jpg" width="300" height="200"></canvas> 

तो निम्नलिखित सीएसएस कहा:

.blur { 
    min-width: 100%; 
    min-height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -2; 
    opacity: 0.7; 
} 

लेकिन यह काम नहीं कर रहा।

देखें निम्नलिखित jsFiddlehttp://jsfiddle.net/RDdbt/1/

Answer 1

इस प्रयास करें:

var CanvasImage=function(e,t){ 
    this.image=t, 
    this.element=e, 
    this.element.width=this.image.width, 
    this.element.height=this.image.height; 
    var n=navigator.userAgent.toLowerCase().indexOf("chrome")>-1, 
    r=navigator.appVersion.indexOf("Mac")>-1; 
    n&&r&&(this.element.width=Math.min(this.element.width,300),this.element.height=Math.min(this.element.height,200)), 
    this.context=this.element.getContext("2d"), 
    this.context.drawImage(this.image,0,0) 
}; 

CanvasImage.prototype={ 
    blur:function(e){ 
     this.context.globalAlpha=.5; 
     for(var t=-e;t<=e;t+=2) 
      for(var n=-e;n<=e;n+=2) 
       this.context.drawImage(this.element,n,t), 
      n>=0&&t>=0&&this.context.drawImage(this.element,-(n-1),-(t-1)); 
      this.context.globalAlpha=1 
     } 
}, 

$(function(){ 
    var image,canvasImage,canvas; 
    $(".blur").each(function(){ 
     canvas=this, 
     image=new Image, 
     image.onload=function(){ 
      canvasImage=new CanvasImage(canvas,this), 
      canvasImage.blur(4) 
     }, 
     image.src=$(this).attr("src"); 
    }); 
}); 

http://jsfiddle.net/RDdbt/6/