die Größe von Bildern mit Leinwand - CSS-Überlaufproblem

Question

Ich arbeite an einer JavaScript-Bildskalierungs-Funktion, die auf dem IE vertraut nur DXImageTransform Addon.

Wollen moderne Browser als auch zu adressieren, ich habe einen Schuss auf der Leinwand, mit recht guten Ergebnissen.

Allerdings habe ich Gesicht ein Problem in meiner Resize-Funktion, die die folgende ist:

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

Wenn mein Bild größer als die Leinwand Artikel wird, dann wird man nur einen Teil des Bildes sehen, was schlecht ist.

Ich habe versucht, die Leinwandgröße zur Laufzeit zu optimieren, aber wenn wirkt sich auf die Anzeige der Größe geänderte Bild.

So landete ich erkläre ein groß Canvas-Element, das ist ziemlich in Ordnung ist, mit der Ausnahme, dass der CSS-Überlauf von meiner Web-Seite auf meinem größten Elemente eingestellt und nicht auf meiner Größe geänderte Bild, das ist ein Schmerz.

Also ich denke, es gibt zwei Möglichkeiten, um mein Problem zu lösen:

1. Versuchen Sie, das große Canvas-Element aus dem Überlauf System ausgeschlossen
2. Versuchen Sie das Canvas-Element Größe zu aktualisieren, wenn die Größenänderung (ich da etwas verpasst haben)

Answer 1

Ich habe nicht versucht, dass mich selbst, aber vielleicht können Sie ein Canvas-Element aus dem Dom, mit document.createElement erstellen. Es könnte, ohne die Anzeige beliebiger Größe sein.

Nun, mir fehlt Kontext (warum Sie Bilder auf diese Weise die Größe haben, anstatt Breite der Verwendung und Höhe Attribute, unter anderen Fragen) so vielleicht ich den Punkt bin fehlt.