3

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

我对如何制作这个有两个想法。第一个将有一个带有背景图像集的简单 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。当用户调整屏幕大小时，我也想调整canvas元素内的图像大小。模糊或不模糊。

我认为它会设置为这样的：

$(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';
}

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

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

4

1 回答 1

5

加载普通图像，使用画布创建图像的模糊版本，然后再次将其转换为真实图像以用于<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 + ")";
}

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

于 2013-06-03T16:27:10.360 回答