Efekt rozmycia tła z plamami na płótnie

Question

W jaki sposób coderwall.com robi ten efekt tła, gdy robi mały obraz, rozmazuje go i powiększa do 100% widoku. Oto przykład: https://coderwall.com/p/on5ojq

Próbowałem:

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

Następnie dodaje się następujący CSS:

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

Ale to nie działa.

Zobacz następujące jsFiddlehttp://jsfiddle.net/RDdbt/1/

Answer 1

Spróbuj tego:

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/