CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Corfitz.
Corfitz.

Reputation: 1884

html5 canvas background image blur and resize

I have an idea of making a canvas the background with an image. The reason why I want the canvas element to be the background is because I would like to blur the image when the user is logged in. I think that would be a nice effect. And since I don't refresh the page I like it to animate a blurring effect. I am going to have multiple questions in here because they all rely on each other.

I have 2 ideas of how to make this. the first one will have a simple div tag with the background image set. then, when the user have logged in - a canvas element will be created by the script with the background image placed as in the div, then blur it and let it fade in over the div tag.

Another way would be to build the canvas element from the beginning and then let the image be set from the beginning.

This is how I make a background image.

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

Okay.. thats the easy part.. I need a way to make the height or width in the drawImage function set to auto. if the width is bigger than the height I want the height to be set to auto. I don't want the image to be stretched over the screen. How should I do that?

Now problem number 2. When the user resizes the screen, I would like to resize the image inside the canvas element as well. blurred or not blurred.

i assume it would be set to something like this:

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

Now I still need the auto mechanism for the height or width of the image.

I am not going to ask for the blur effect, since it should be able to find online somewhere, but what i would like to know is what you would recommend for me to do, when fading in the blurred version. I don't remember there should be a way to fade inside a canvas element, so perhaps I have to duplicate the already existing canvas and then blur and then fade in.

Upvotes: 3

Views: 5351

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53598

Load the plain image, use a canvas to create a blurred version of the image, then turn that into a real image again for use in an <img> or css background:

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

with a set handler:

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

And now you have a background image that is blurred.

Upvotes: 5

Related Questions