Mise à l'échelle de Canvas drawImage

Question

J'essaie de mettre à l'échelle une image proportionnellement à la toile. Je suis capable de la mettre à l'échelle avec une largeur et une hauteur fixes :

context.drawImage(imageObj, 0, 0, 100, 100)

Mais je veux seulement redimensionner la largeur et que la hauteur soit redimensionnée proportionnellement. Quelque chose comme ce qui suit :

context.drawImage(imageObj, 0, 0, 100, auto)

J'ai cherché partout où je pouvais et je n'ai pas vu si c'était possible.

Answer 1

context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)

Answer 2

La solution de @TechMaze est très bonne.

Voici le code après quelques corrections et l'introduction de l'option image.onload événement. image.onload est essentiel afin d'éviter toute forme de distorsion.

function draw_canvas_image() {

  var canvas = document.getElementById("image-holder-canvas");
  var context = canvas.getContext("2d");
  var imageObj = document.getElementById("myImageToDisplayOnCanvas");

  imageObj.onload = function() {
    var imgWidth = imageObj.naturalWidth;
    var screenWidth  = canvas.width;
    var scaleX = 1;
    if (imgWidth > screenWidth)
        scaleX = screenWidth/imgWidth;
    var imgHeight = imageObj.naturalHeight;
    var screenHeight = canvas.height;
    var scaleY = 1;
    if (imgHeight > screenHeight)
        scaleY = screenHeight/imgHeight;
    var scale = scaleY;
    if(scaleX < scaleY)
        scale = scaleX;
    if(scale < 1){
        imgHeight = imgHeight*scale;
        imgWidth = imgWidth*scale;          
    }

    canvas.height = imgHeight;
    canvas.width = imgWidth;

    context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
  }
}

Answer 3

Et si vous voulez mettre l'image à l'échelle en fonction de la taille de l'écran, voici le code que vous pouvez utiliser :

var imgWidth = imageObj.naturalWidth;
var screenWidth  = $(window).width() - 20; 
var scaleX = 1;
if (imageWdith > screenWdith)
  scaleX = screenWidth/imgWidth;
var imgHeight = imageObj.naturalHeight;
var screenHeight = $(window).height() - canvas.offsetTop-10;
var scaleY = 1;
if (imgHeight > screenHeight)
  scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY)
  scale = scaleX;
if(scale < 1){
  imgHeight = imgHeight*scale;
  imgWidth = imgWidth*scale;      
}
canvas.height = imgHeight;
canvas.width = imgWidth;
ctx.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);

Si vous n'utilisez pas jQuery, remplacez $(window).width avec l'option équivalente appropriée.