Modifier les dimensions de l'objet() (largeur et hauteur)

Question

Je tente de redimensionner les dimensions d'une image tout en conservant ses proportions. Cela semble être une tâche très simple, mais je ne peux pas trouver une réponse rellevent n'importe où .. (relatif à l'objet Image() de JavaScript). Il me manque probablement quelque chose de très évident. Voici ce que je suis en train de réaliser:

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

Ceci est de redimensionner proportionnellement une image avant d'être tiré sur une toile comme ceci: context.drawImage(img,0,0,canvas.width,canvas.height); .Cependant il semblerait que je ne peux pas changer directement Image() dimensions, alors comment est-il fait ? Merci.

Modifier: Je n'ai pas résolu correctement l'image proportions en utilisant la multiplication croisée. @markE fournit une méthode soignée pour obtenir le bon ratio. Ci-dessous mon nouveau (travail) mise en œuvre:

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

Answer 1

Voici comment à l'échelle de votre image proportionnellement:

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){ 
    return(Math.min((maxW/imgW),(maxH/imgH))); 
} 

Utilisation:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/balloon.png"; 
 
function start(){ 
 

 
    canvas.width=100; 
 
    canvas.height=100; 
 

 
    var w=img.width; 
 
    var h=img.height; 
 

 
    // resize img to fit in the canvas 
 
    // You can alternately request img to fit into any specified width/height 
 
    var sizer=scalePreserveAspectRatio(w,h,canvas.width,canvas.height); 
 

 
    ctx.drawImage(img,0,0,w,h,0,0,w*sizer,h*sizer); 
 

 
} 
 

 
function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){ 
 
    return(Math.min((maxW/imgW),(maxH/imgH))); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<h4>Original Balloon image resized to fit in 100x100 canvas</h4> 
 
<canvas id="canvas" width=100 height=100></canvas>

Answer 2

Les dimensions de l'image sont définies dans le constructeur

new Image(width, height) 
// for proportionally consistent resizing use new Image(width, "auto") 

ou

the context.drawImage() 

les arguments sont les suivants:

context.drawImage(image source, x-coordinate of upper left portion of image, 
y-coordinate of upper left portion of image,image width,image height); 

simplement positio n l'image avec les deux premières coordonnées numériques, puis ajuster manuellement la taille avec les deux derniers (largeur, hauteur)

//ex. 
var x = 0; 
var y = 0; 
var img = new Image (200, "auto"); 
    img.src = "xxx.png"; 
context.drawImage(img,x,y,img.width,img.height);