用帆布coderwall模糊背景效果 [英] Coderwall blurred background effect with canvas

问题描述

如何 coderwall.com 这样的背景效果，他们采取一个小图像，对其进行模糊处理，并调整其大小到视口的100％。这里有一个例子：的https：//$c$crwall.com/p/on5ojq

How is coderwall.com doing this background effect, where they take a small image, blur it, and size it up to 100% of the viewport. Here is an example: https://coderwall.com/p/on5ojq

我试过：

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

然后添加下面的CSS：

Then added the following css:

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

但它不工作。

请参阅以下的jsfiddle http://jsfiddle.net/RDdb​​t/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/RDdb​​t/6/

这篇关于用帆布coderwall模糊背景效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！