Ä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);
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Bild-Abmessungen werden im Konstruktor
oder
die Argumente sind wie folgt:
einfach positionieren Sie das Bild mit den ersten beiden numerischen Koordinaten und dann manuell die Größe anpassen, mit den letzten beiden (Breite,Höhe)
InformationsquelleAutor nick