Coderwall模糊背景效果與畫布

coderwall.com如何做到這一背景效果，他們在哪裏採取一個小圖像，模糊它，並將其視爲100％的視口。這裏有一個例子：https://coderwall.com/p/on5ojq Coderwall模糊背景效果與畫布

我想：

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

然後添加下面的CSS：

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

但它無法正常工作。

請參見下面的jsFiddlehttp://jsfiddle.net/RDdbt/1/

來源

2012-11-15 Justin

這種效果是不相關的CSS，但JS，如果你檢查他們的劇本，你會發現這個鏈接HTTPS：/ /github.com/ceramedia/examples/blob/gh-pages/canvas-blur/v5/canvas-image.js – Paradise

嘗試實現該JavaScript，但出現錯誤。這裏是更新的jsFiddle http://jsfiddle.net/RDdbt/3/。你看到問題了嗎？謝謝。 – Justin

你有沒有想過這個？我能夠得到它的工作，但不是與你的jsfiddle例子中使用的腳本。我用原始腳本...讓我知道你是否想要幫助！ –

試試這個：

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/

來源

2013-06-20 21:39:57 Pastur

Coderwall模糊背景效果與畫布

回答

相關問題