Wie zum proportionalen ändern der Größe eines Bildes im canvas-Bereich?

AFAIK, um die Größe eines geladenen Bildes in das HTML5 canvas-Element wird wie folgt vorgenommen:

var img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0, 300, 200); //resizes image to 300px wide, 200px high
}
img.src = 'images/myimage.jpg';

Aber dann habe ich gemerkt, dass das Bild wäre nicht proportional korrekt. Ich versuchte es dann mit einem parameter nur (wie in HTML), aber ich fand das hat nicht funktioniert entweder.

Wie kann ich proportional die Größe des Bildes?

InformationsquelleAutor think123 | 2012-12-30

  1. 17

    Holen Sie sich die img.width und img.height, dann berechnen Sie die proportionale Höhe nach zu welcher Breite du bist sizing.

    Beispielsweise:

    ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));
    Der code stammt aus dem Beispiel, geben Sie bitte ein neues Beispiel, wenn Sie gehen, um den code Bearbeiten.
    in dem Beispiel sind die extra 300 wird verwendet, um anzuzeigen, Leinwand separat ( nicht übereinander) und ist etwas zu tun extra als nur proportional verkleinern Sie das Bild Leinwand. Wenn der link zum Beispiel nicht mehr funktioniert den code hier kann verwirrend sein. Danke für die Antwort sowieso.

    InformationsquelleAutor robertc

  2. 10

    Schrieb ich einen blog-Artikel zu diesem Thema im letzten letzten Jahr. Sie können Lesen hier. Im Grunde ist es bietet eine Funktion für die Skalierung ein Bild mit dem richtigen Seitenverhältnis. Es umfasst die Unterstützung sowohl Landschafts-und portrait-Ausrichtung und Dimensionierung zwischen den beiden. Sie können sogar wählen zwischen "letterbox" und "pan-und-scan (zoom)" - Modus.

    Es wurde geschrieben, mit div-Positionierung im Auge, kann aber leicht verstanden werden, denn die Leinwand.

    In der Nähe des Ende der Seite ist die "ScaleImage" - Funktion. Könnte das sein, was Sie wollen. Dann können Sie es wie folgt:

    var img = new Image();
img.onload = function () {

  var result = ScaleImage(img.width, img.height, 300, 200, true);

  ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); //resizes image to a target size of 300x200 using letterbox mode
}
img.src = 'images/myimage.jpg';

    Können Sie ersetzen Sie das Ergebnis.targetleft und Ergebnis.targettop mit "0", wenn Sie nicht möchten, dass das Bild zentriert.

    vielen Dank für die Aktualisierung von code. Sie verpasste eine Stelle (unter den code)
    yep. wieder fixiert

    InformationsquelleAutor selbie

Schreibe einen Kommentar