Fade in canvas image and stretch while keeping proportions
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm testing a new canvas background here: http://goo.gl/Gj1rbH
Check also the pages "Artister", "Udgivelser" and "Videoer" for the use of canvas.

I have 2 issues I need to fix:

1: The images needs to stretch so it fit the width and height of the screen. Also when resized. Just like "background-size:cover" or this: http://goo.gl/Gj1rbH.

2: Because the backgrounds takes some milliseconds to process, I would like to have them fade-in when ready. How can I do so?

As for both things I would be happy if I dont need to include any new plugin to do so. Speed is very important for this site!

Thanks!

Hi, I didn't understand the first problem. Can you tell me which images are you talking about, the blurred one at the background ? In the page you posted, all seems OK for me.
kerncy almost 6 years ago
Try to resize your screen in all possible sizes. Then you'll see it doesnt always fill out the background. And yeah its the background
CPHREC almost 6 years ago
I actually have an extra request, which of course is voluntarily as its not in the original "bounty". I would like to greyscale all images about 60%. I know I can use CSS3 filters, but they are bad for performance, and I dont see the need to an additional step if this can be done in the first canvas processesing
CPHREC almost 6 years ago
I'm sorry but the background-image doesn't appear anymore so I can't test, have you modified something ?
kerncy almost 6 years ago
Hmm no :l You can see a screenshot here: http://cl.ly/image/1e3G2i1o3t1O The background should now extend all the way to the bottom. Just like with "background-size: cover"
CPHREC almost 6 years ago
Hmm no :l You can see a screenshot here: http://cl.ly/image/1e3G2i1o3t1O The background should now extend all the way to the bottom. Just like with "background-size: cover" Do you need any php and less files to work with?
CPHREC almost 6 years ago
If it doesn't bother you, i would like to have the php and less files, it will be easier/quicker to reproduce all the canvas and style parts.
kerncy almost 6 years ago
Hmm no :l You can see a screenshot here: http://cl.ly/image/1e3G2i1o3t1O The background should now extend all the way to the bottom. Just like with "background-size: cover" Do you need any php and less files to work with? This is the code I use: window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); var imageObj=new Image();stackBoxBlurImage('coverbgblur','canvas',11,false,2); context.fillStyle="rgba(255, 255, 255, 0.25)"; context.fillRect(0,0,2000,2000); } and this is the script: http://goo.gl/C8Zg2P
CPHREC almost 6 years ago
You can download it here: http://cl.ly/1z1D0B0S0K1H
CPHREC almost 6 years ago
I will work on it tonight, I have to go to work (I'm in France)
kerncy almost 6 years ago
Merci! ;)
CPHREC almost 6 years ago
awarded to Wikimedia

Crowdsource coding tasks.

1 Solution


It was much harder than I thought but I finally achieved it !!

The idea was to use a div instead of a canvas to draw the background. But in order to keep the best performance possible for bluring, we create a virtual canvas using getCSSCanvasContext and draw on it. This canvas is then used as background-image of the div using -webkit-canvas procedure. So i added a div, I changed the blur code, and modified the blur function to use a virtual canvas so I removed the useless code of the blur process.

I have modified the files :

  • index.php
  • blurbgscript.php
  • apps.js

The full code is available here : https://www.dropbox.com/s/jk3gwcl8gq32nph/stage.zip

Hope you will be happy with it.

Will it work in all major browsers? I'll check the code right away!
CPHREC almost 6 years ago
I only tested it and make it work on Chrome, theorically it must be OK with opera. All the others browsers were not handling the rest of your website (ie the first big picture) I haven't tried to make it work on them :s
kerncy almost 6 years ago
Damn it works fine in Chrome and Safari, but not Firefox... I need it to work on all major browsers (IE9+, Chrome, Safari and Firefox)... Can it be that its just some moz-prefixes it lacks? Also the fadeIn is not sooo fluid. Is there a way to better this?
CPHREC almost 6 years ago
Damn it works fine in Chrome and Safari, but not Firefox... I need it to work on all major browsers (IE9+, Chrome, Safari and Firefox)... Can it be that its just some moz-prefixes it lacks? Also the fadeIn is not sooo fluid. Is there a way to better this? Maybe CSS3 which should make fades more fluid?
CPHREC almost 6 years ago
Did some checks, and if we can get this to work in Firefox and IE9+ and also use CSS3 transitions for the FadeIn, its a very useful fix!
CPHREC almost 6 years ago
For firefox and IE9, there is no easy solution without putting all the process in CSS3. If you would like to keep the canvas method, the computation of the blur effect will be done at each frame and the performance will be worse than CSS3. Maybe it is possible to create a already blured cached image using GD and use it as background image, this will solve all the problem in all browser, but this will be out of this bounty specification.
kerncy almost 6 years ago
Hmm is that because they lack the "-webkit-canvas"? An option would be to use Modernizr and make a CSS-transform, that scales the images. But not very beautiful though :l We cant use the old plugin, use CSS3 transitions for FadeIn and create some kind of div that stretches the background correct?
CPHREC almost 6 years ago
Yes, the -webkit-canvas is an option only used on webkit based browser. I don't know Modernizr. I think the solution you propose are very heavy in term of javascript code and will decrease the performance. You should consider the cached version of the blured image, you will have much better performance despite a little longer download time for the cached image and the generation time on the server for the first time. A mock-up can be easy to do.
kerncy almost 6 years ago
I think I need to understand your idea. A cached image would be an extra image which is blurred (like a jpg) right?
CPHREC almost 6 years ago
Yes, it will be generated on the fly at first access and stored on your server HDD (or can be generated each time but it uses server resources). Then it will be used just like a standard background-image in a div.
kerncy almost 6 years ago
Ahhh ok. That was also my first original idea, but I like the flexibility of the canvas more, also because its proccesed on the client and wont demand an extra HTTP-request. If we use the original script, can we make it greyscale and FadeIn (with CSS3), so it works in all browsers? Found these links: https://gist.github.com/zachstronaut/1184900 http://stackoverflow.com/questions/4166645/html5-canvas-image-resizing
CPHREC almost 6 years ago
Check Rdio's player (push the small cover in the right side): http://www.rdio.com It works there
CPHREC almost 6 years ago
I got the fadeIn to work with CSS3, so just remove that from the task (and code) :)
CPHREC almost 6 years ago
Do you have the new code that uses CSS3 fade in ? so I can try to add the canvas-resizing problem directly in it.
kerncy almost 6 years ago
Sure. http://jsfiddle.net/JtYf6/ Very simple :) The canvas-resize will still lack IE9+ and Firefox support right? We could fix that by using CSS3 Transform (Scale) for IE9+ and Firefox only, so the image is so big it will fill out the entire screen. However I'm not able to test if it works as I'm on Mac
CPHREC almost 6 years ago