redimensionner les images avec la toile - problème de débordement de css

Question

Je travaille sur une fonction de redimensionnement d'image JavaScript qui se fondent sur l'IE ne DXImageTransform addon.

Voulant aborder les navigateurs modernes ainsi, j'ai donné un coup de feu sur la toile, avec de très bons résultats.

Cependant, je fais face à un problème dans ma fonction de modification de taille qui est le suivant:

function Resize(oObj, flMultiplier)
{       
  var canvas = document.getElementById('canvas');
  var canvasContext = canvas.getContext('2d');

  oObj.style.visibility = 'hidden';

  canvasContext.clearRect(0,0,canvas.width,canvas.height); // clear canvas
  canvasContext.fillStyle = 'rgba(0,0,0,0.4)';
  canvasContext.scale(flMultiplier,flMultiplier);
  canvasContext.drawImage(oObj, 0, 0);
}

Si mon image devient plus grand que l'élément de toile, puis on verra seulement une partie de l'image, ce qui est mauvais.

J'ai essayé de modifier la taille de la toile lors de l'exécution, mais si affecte l'affichage de l'image redimensionnée.

Je fini par déclarer grand élément de toile, ce qui est assez correct, sauf que le trop-plein de css de ma page Web est réglée sur mon plus grand élément, et non pas sur mon image redimensionnée, qui est une douleur.

Je suppose qu'il ya deux façons de résoudre mon problème:

1. Essayez d'exclure le grand élément de toile du système de trop-plein
2. Essayez de mettre à jour la taille de l'élément de toile lors du redimensionnement (j'ai raté quelque chose)

Answer 1

Je ne l'ai pas essayé moi-même, mais vous pouvez peut-être créer un élément de toile de Dom, avec document.createElement. Il pourrait être de taille arbitraire, sans perturber l'affichage.

Maintenant, je manque le contexte (pourquoi vous redimensionnez les images ainsi au lieu d'utiliser des attributs largeur et la hauteur, entre autres questions) alors peut-être je manque le point.