Changement de l'Image() de l'objet dimensions (largeur et hauteur)

J'essaie de redimensionner une image à ses dimensions, tout en conservant ses proportions. Cela semble être une tâche très simple, mais je ne peux pas trouver un rellevent réponse partout.. (concernant JavaScript Image() objet). Je suis probablement manquant quelque chose de très évident. Ci-dessous est 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;
    }
};

C'est proportionnellement redimensionner une image avant d'être dessiné sur une toile comme suit: context.drawImage(img,0,0,canvas.width,canvas.height);.Cependant, il semblerait que je ne peut pas modifier directement Image()dimensions, alors comment est-il fait? Merci.

Edit: je n'ai pas correctement résolu l'image les proportions à l'aide de la croix-multiplication. @markE offre un joli méthode d'obtenir le bon ratio. Ci-dessous mon nouveau (de 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);
  • Vous définissez la taille de l'image dans les arguments passés à drawImage. Aussi, en général, il est préférable de définir un gestionnaire de chargement d'une image d'abord, puis de la src.
  • Pouvez-vous fournir plus de détails pour mieux les tests? -- comme la référence de l'image et de l'HTML.
  • C'est vrai, merci @Teemu Cependant si j'ai mis ces variables comme tellement context.drawImage(img,0,0,img.width,img.height); ou context.drawImage(img,0,0,null,null);, il s'étend encore ou ne change pas les dimensions de l'image. Il semblerait Image() n'a pas .width et .height variables?
  • Qu'est-ce que l'effet désiré? Rien de plus grand 200x200 va juste être redimensionnée à 200x200 indépendamment de l'aspect ratio. Êtes-vous en essayant de la rendre toujours visible dans le canevas ou la toujours le couvrir?
  • Je suis d'essayer de maintenir un ratio d'aspect, tout en garantissant l'image s'adapte à l'intérieur de la toile.. en Regardant mon code actuel, je vois ce que tu veux dire - si la largeur de l'image et hieght est plus grand que 200, puis il va simplement se mettre à 200. Que proposez-vous?
InformationsquelleAutor TheMintyMate | 2016-02-24
  1. 10

    Voici comment adapter votre image proportionnellement:

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

    Utilisation:

    JS:

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

    CSS:

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

    HTML:

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

    InformationsquelleAutor markE
  2. 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 comme suit:

    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 la position de l'image avec les deux premiers numérique coordonnées et ensuite 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);
    InformationsquelleAutor nick