ridimensionare le immagini con tela - problema CSS di overflow

Question

Sto lavorando su un'immagine JavaScript ridimensionamento caratteristica che si basano su IE soltanto DXImageTransform addon.

Volendo affrontare i browser moderni come bene, ho dato un colpo alla tela, con buoni risultati.

Comunque, mi trovo di fronte un problema nella mia funzione di ridimensionamento, che è il seguente:

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

Se la mia immagine diventa più grande della voce di tela, poi si vedrà solo una parte dell'immagine, che è male.

Ho cercato di ottimizzare le dimensioni del quadro in fase di esecuzione, ma se influenza la visualizzazione dell'immagine ridimensionata.

Così ho finito per dichiarare un big elemento canvas, che è abbastanza OK, tranne che il trabocco css della mia pagina web viene regolata sulla mia più grande elemento, e non sulla mia immagine ridimensionata, che è un dolore.

Quindi credo che ci sono due modi per risolvere il mio problema:

1. Prova a escludere la grande elemento canvas dallo schema di overflow
2. Provare ad aggiornare la dimensione elemento canvas, quando il ridimensionamento (forse ho perso qualcosa lì)

Answer 1

Non ho provato io stesso, ma forse è possibile creare un elemento canvas fuori dal Dom, con document.createElement. Potrebbe essere di dimensione arbitraria senza disturbare il display.

Ora, mi manca contesto (perché si ridimensiona le immagini in questo modo invece di utilizzare attributi width e height, tra le altre questioni) quindi forse mi manca il punto.