drawImage redimensionner l'image à 500px haute

Question

J'essaie de prendre l'image qui est 1280x960 et la redimensionner en utilisant drawImage de sorte qu'il est de 600 pixels de haut. Je travaille sur le rapport que je pense que je dois y parvenir, mais ne sais pas comment appliquer ...

var canvas = document.getElementById('mycanvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var img = new Image(); 
 
img.onload = function() { 
 
    canvas.height = this.height; 
 
    canvas.width = this.width; 
 
    
 
    ratio = canvas.height/canvas.width; 
 
    
 
    console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio); 
 
    
 
    ctx.drawImage(img, 0, 0, 300, 500); 
 
} 
 
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';

<canvas id="mycanvas"></canvas>

Comment puis-je spécifier la taille de l'image résultante, ce qui rend la largeur automatique? Je veux finalement que cette fonction redimensionne n'importe quelle image à 500 pixels de haut.

Answer 1

est ici une solution, un rond-point de peu, mais semble fonctionner. J'ai créé une nouvelle image en utilisant toDataURL() de la toile de taille d'origine. Bien que la nouvelle image soit réduite, la dimension totale est toujours celle de l'image originale, de sorte que l'espace restant est transparent. Ensuite, je définis et clip cette image dans une nouvelle toile. La toile résultante a l'image correctement dimensionnée qui peut être copiée et collée avec la dimension désirée.

Si l'extrait ci-dessous ne montre pas l'image dans la nouvelle toile, s'il vous plaît essayer le violon suivant qui semble bien fonctionner: https://jsfiddle.net/jfeferman/u80fhy0z/

var canvas = document.getElementById('mycanvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var img = new Image(); 
 
img.crossOrigin = "Anonymous"; 
 
img.onload = function() { 
 
    canvas.height = this.height; 
 
    canvas.width = this.width; 
 
    
 
    ratio = canvas.height/canvas.width; 
 
    
 
    console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio); 
 
    
 
    ctx.drawImage(img, 0, 0, 500/ratio, 500); 
 
    
 
    var newImage = new Image(); 
 
    newImage.crossOrigin = "Anonymous"; 
 
    newImage.src = canvas.toDataURL(); 
 
    
 
    var newCanvas = document.getElementById("newcanvas"); 
 
    newCanvas.height = 500; 
 
    newCanvas.width = 500/ratio; 
 
    var newCtx = newCanvas.getContext('2d'); 
 
    newCtx.drawImage(newImage, 0, 0, 500/ratio, 500, 0, 0, 500/ratio, 500); 
 
} 
 
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';

#mycanvas { 
 
    display: none; 
 
}

<canvas id="newcanvas"></canvas> 
 
<canvas id="mycanvas"></canvas>

Answer 2

J'ai appliqué le rapport à votre appel à drawImage et il semble fonctionner:

ctx.drawImage(img, 0, 0, 500/ratio, 500); 

var canvas = document.getElementById('mycanvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var img = new Image(); 
 
img.onload = function() { 
 
    canvas.height = this.height; 
 
    canvas.width = this.width; 
 
    
 
    ratio = canvas.height/canvas.width; 
 
    
 
    console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio); 
 
    
 
    ctx.drawImage(img, 0, 0); 
 
    canvas.style.width = 500/ratio + "px"; 
 
    canvas.style.height = 500 + "px"; 
 
} 
 
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';

<canvas id="mycanvas"></canvas>