Hiệu ứng nền mờ Coderwall với canvas

Question

Làm thế nào là coderwall.com thực hiện hiệu ứng nền này, nơi chúng chụp ảnh nhỏ, làm mờ nó và tăng kích thước lên 100% của chế độ xem. Dưới đây là một ví dụ: https://coderwall.com/p/on5ojq

tôi đã cố gắng:

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

Sau đó thêm vào css sau:

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

Nhưng nó không phải đang làm việc.

Xem sau jsFiddlehttp://jsfiddle.net/RDdbt/1/

Answer 1

Hãy thử điều này:

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/