Redim image lent sur Chrome

Version imprimable

12/09/2012, 23h30
Billy KiT

Redim image lent sur Chrome

Bonjour à tous,

j'ai un problème sur une petite application avec zoom à la molette de souris. La photo à zoomer/dézoomer est grande. Sur Chrome, cela fonctionne parfaitement jusqu'à ce que je fasse perdre puis reprendre le focus à la fenêtre. A partir de là, il se passe 5 à 10 secondes où ça rame vraiment puis tout rentre dans l'ordre.
Cela ne vient pas de l'évènement mousewheel, car le problème est le même avec des boutons. Il semble que Chrome n'ait plus l'image en mémoire et qu'il qu'il lui faut un moment pour la retrouver (???).
Aucun souci sur IE et FF.

Toute aide sera la bienvenue, merci

BK
13/09/2012, 08h37
SpaceFrog

et donc le jeu est d'essayer de deviner le code utilisé ?

ça ne semble pas venir du code puisque c'est juste la modif du height et du width d'une image. Voici un petit bout de code qui fait ressortir le problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
window.onload = function() {
	var currentZoom = 100;
	h = document.getElementById('im').width;
	w = document.getElementById('im').height;
 
	function wheel(event){
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120; 
		} else if (event.detail) {
			delta = -event.detail/3;
		}
		if (delta) {
			zzoom(delta);
		}
	}
 
	function zzoom(z) {
		if ((currentZoom+z)<=10) z=currentZoom+z;
		else
		z = Math.round(currentZoom*(1+z*5/100));
		document.getElementById('im').width = h*z/100;
		document.getElementById('im').height = w*z/100;
		currentZoom = z;
	}
 
	if (window.addEventListener)
		window.addEventListener('DOMMouseScroll', wheel, false);
 
	if (typeof(window.onmousewheel)=='undefined')
	document.onmousewheel = wheel;
	else
	window.onmousewheel = wheel;
}

Code:

<img id='im' src="monimage.jpg" />

L'image fait 2700 x 1900 pixels. Comme je l'ai dit, le mousewheel n'est pas en cause.

merci
BK

13/09/2012, 11h54
p3ga5e
D’après les symptômes que tu décris, cela ressemble fort à un swap mémoire.

A mon avis, le fait de manipuler ton image avec le DOM, n’aide pas. Le moteur de rendu html de Chrome (WebKit) n’est pas adapter pour ce genre d’opération.
Je te conseil d’utiliser un moteur de rendu vectoriel, pour Chrome ils en existent au moins 4 :
- Le context 2D de la balise canvas
- Le context WebGL de la balise canvas
- Le moteur de rendu Flash
- Le moteur de rendu SVG
13/09/2012, 14h55
Billy KiT

Le problème vient du moteur de rendu de Chrome qui applique un rééchantillonage à l'image (resampling) qui d'ailleurs donne un résultat assez impressionnant. Mais quand ce rendu a été appliqué (après un petit timeout), l'image originale est virée de la mémoire et elle est recalculée systématiquement, ce qui consomme de la CPU.
Il y a une solution qui consiste à forcer Chrome à ne pas rééchantilloner

Code:

<img style="image-rendering:-webkit-optimize-contrast;"

Je vais voir si on peut modifier dynamiquement ce style après un timeout pour profiter quand même du rendu.

:ccool: BK

oui on peut avec style.imageRendering

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
window.onload = function() {
	var currentZoom = 100;
	var renderingTimer;
	h = document.getElementById('im').width;
	w = document.getElementById('im').height;
 
	function wheel(event){
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120; 
		} else if (event.detail) {
			delta = -event.detail/3;
		}
		if (delta) {
			zzoom(delta);
		}
	}
 
	function zzoom(z) {
		clearTimeout(renderingTimer);
		document.getElementById('im').style.imageRendering='-webkit-optimize-contrast';
		if ((currentZoom+z)<=10) z=currentZoom+z;
		else
		z = Math.round(currentZoom*(1+z*5/100));
		document.getElementById('im').width = h*z/100;
		document.getElementById('im').height = w*z/100;
		currentZoom = z;
		renderingTimer = setTimeout(function () {document.getElementById('im').style.imageRendering='auto'}, 700); // applique rendu Chrome au bout de 700 ms
	}
 
	if (window.addEventListener)
		window.addEventListener('DOMMouseScroll', wheel, false);
 
	if (typeof(window.onmousewheel)=='undefined')
	document.onmousewheel = wheel;
	else
	window.onmousewheel = wheel;
}

Code:

<img id='im' src="monimage.jpg" style="image-rendering:-webkit-optimize-contrast;" />

Pour ceux que ça interesse et pour Chrome uniquement (Safari pas testé)

BK