html5 画布背景图像模糊和调整大小

Question

我有一个用图像制作画布背景的想法。我之所以希望画布元素作为背景，是因为我想在用户登录时模糊图像。我认为这会是一个不错的效果。因为我不刷新页面，所以我喜欢它为模糊效果设置动画。我将在这里提出多个问题，因为它们都相互依赖。

我有两个关于如何制作的想法。第一个将有一个带有背景图像集的简单 div 标签。然后，当用户登录时 - 脚本将创建一个画布元素，背景图像放置在 div 中，然后模糊它并让它淡入 div 标签。

另一种方法是从头开始构建画布元素，然后从头开始设置图像。

这就是我制作背景图像的方式。

var canvas = document.getElementById('bg_canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
};
imageObj.src = '2.jpg';

好的.. 那是最简单的部分.. 我需要一种方法将drawImage函数中的高度或宽度设置为auto. 如果宽度大于高度，我希望将高度设置为自动。我不希望图像在屏幕上拉伸。我该怎么做？

现在是问题 2。当用户调整屏幕大小时，我也想调整画布元素内的图像大小。模糊或不模糊。

我想它会被设置成这样：

$(document).ready(function() {
    winResize();
    $(window).resize(function() {
        winResize());
    }
});

function winResize() {
    var canvas = document.getElementById('bg_canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, canvas.height, canvas.width);
    };
    imageObj.src = '2.jpg';
}

现在我仍然需要图像高度或宽度的自动机制。

我不会要求模糊效果，因为它应该可以在网上某处找到，但我想知道的是，当模糊版本逐渐消失时，您会建议我做什么。我不记得应该有一种方法可以在画布元素内淡入淡出，所以也许我必须复制已经存在的画布，然后模糊然后淡入。

Answer 1

加载普通图像，使用画布创建图像的模糊版本，然后再次将其转换为真实图像以用于<img>或 css 背景：

function blurImage(imgURL) {
  var img = new Image();
  img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext("2d");
    context.drawImage(img,0,0);
    /*
        code that actually blurs the image goes here
    */
    var dataURI = canvas.toDataUrl("image/png");
    setBlurredImage(dataURI);
  };
  img.src = imgURL;
}

使用设置处理程序：

function setBlurredImage(dataURI) {
  whateverElement.style.background = "url(" + dataURI + ")";
}

现在你有一个模糊的背景图像。