Ändern Image () - Objekt-Dimensionen (Breite und Höhe)

Ich bin versucht, ändern Sie die Größe eines Bilds, während das behalten Sie das Seitenverhältnis. Dies scheint wie eine sehr einfache Aufgabe, aber ich kann nicht finden, eine rellevent Antwort überall.. (in Bezug auf JavaScript ist Image() Objekt). Ich bin wahrscheinlich etwas fehlt ganz offensichtlich. Unten ist das, was ich versuche zu erreichen:

var img = new window.Image();
img.src = imageDataUrl;
img.onload = function(){
    if (img.width > 200){
        img.width = 200;
        img.height = (img.height*img.width)/img.width;
    }
    if (img.height > 200){
        img.height = 200;
        img.width = (img.width*img.height)/img.height;
    }
};

Dies ist zum proportionalen ändern der Größe eines Bildes, bevor Sie gezeichnet auf einer Leinwand etwa so: context.drawImage(img,0,0,canvas.width,canvas.height);.Allerdings wäre es angezeigt, die ich nicht direkt ändern Image()Dimensionen, also wie wird es gemacht? Danke.

Edit: ich noch nicht richtig gelöst ist das Bild Proportionen über-Kreuz-Multiplikation. @markE bietet eine saubere Methode zum Erhalt der richtigen Verhältnis. Unten ist meine neue (Arbeits -) Umsetzung:

var scale = Math.min((200/img.width),(200/img.height));
img.width = img.width*scale;
img.height = img.height*scale;
clearCanvas(); //clear canvas
context.drawImage(img,0,0,img.width,img.height);
Sie sollten die Größe des Bildes in Argumente zu übergeben drawImage. Auch im Allgemeinen ist es sicherer, um einen load-handler für ein Bild zuerst, dann der src.
Können Sie uns mehr Details für bessere Tests? - wie die Bild-Referenz und die HTML.
Das stimmt, danke @Teemu Jedoch wenn ich die Variablen so wie context.drawImage(img,0,0,img.width,img.height); oder context.drawImage(img,0,0,null,null); es noch reicht oder nicht, ändern Sie die Bild-Dimensionen. Es scheint Image() nicht .width und .height Variablen?
Was ist die gewünschte Wirkung? Alles größer als 200x200 werden nur in der Größe verändert werden, 200x200, unabhängig von Seitenverhältnis. Sie werden versuchen, es passen immer in den canvas-Bereich oder der stets cover es?
Ich bin versucht, ein Seitenverhältnis, während zugleich das Bild passt in die Leinwand.. ein Blick auf meine aktuelle code, den ich sehen kann, was du meinst - wenn das Bild die width und hieght größer als 200 ist, dann wird es nur immer auf 200 gesetzt. Was schlagen Sie vor?

InformationsquelleAutor TheMintyMate | 2016-02-24

Schreibe einen Kommentar