drawImage画像を500pxの高さに戻す

Question

私は1280x960の画像を取得し、drawImageを使用して600ピクセルの高さになるようにサイズ変更しようとしています。私はこれを達成する必要があるが、適用する方法がわからないと思う比...私は幅を作り、結果のイメージのサイズを指定することができますどのように

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>

を

出てきました自動？私は最終的には、この関数が任意の画像を500ピクセルの高さにサイズ変更したいと考えています。

Answer 1

ここソリューション、ビットラウンドアバウトですが、動作しているようです。元のサイズのキャンバスからtoDataURL()を使って新しい画像を作成しました。新しい画像は縮小されますが、残りのスペースが透明になるように、元の画像のままです。次に、この画像を新しいキャンバスにセットしてクリップします。結果のキャンバスには、適切なサイズのイメージがあり、これをコピーして目的の次元に貼り付けることができます。以下のスニペットは、新しいキャンバスで画像が表示されない場合は

、うまくいくように見える次のバイオリンを試してください。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

私はdrawImageメソッドへお電話に比率を適用し、動作しているようです：

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>