Question

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

我有2个关于如何做到这一点的想法。第一个将有一个简单的div标签与背景图像集。然后，当用户登录时 - 脚本将创建一个canvas元素，背景图像放在div中，然后将其模糊并让它淡入div标签。

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

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

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

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

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

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;
}

使用set handler：

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

现在你的背景图像模糊了。

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

1 个答案: