一个简单的canvas模糊背景图方法

最新推荐文章于 2021-06-30 03:54:55 发布

原创最新推荐文章于 2021-06-30 03:54:55 发布 · 896 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript和HTML5 Canvas实现图像模糊效果的方法，包括创建Image对象、加载图片、绘制图片并添加模糊层等步骤。

blur(document.getElementById('logo'),'http://s.segmentfault.com/img/logo.png',2);


function blur(element, src, strength){  
    var image = new Image();
    image.onload = function(e){
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        canvas.width = this.width;
        canvas.height = this.height;
        
        context.drawImage(this, 0, 0);
        
        context.globalAlpha = 0.5; // Higher alpha made it more smooth
        // Add blur layers by strength to x and y
        // 2 made it a bit faster without noticeable quality loss
        for (var y = -strength; y <= strength; y += 2) {
            for (var x = -strength; x <= strength; x += 2) {
                context.drawImage(canvas, x, y);
            }
        }
        context.globalAlpha = 1;   
        element.style.backgroundImage = 'url('+canvas.toDataURL()+')';
    }
    image.src = src;
}