Javascript：固定サイズのキャンバスで可変サイズの画像

Question

サイズが300x300の固定HTML5キャンバスがあります。ページ上の他の画像のサイズを変更して、JavaScriptを使用して最大幅/高さを300px（より大きなサイズに応じて）にしています。

これはソースイメージのサイズを実際には変更しません。キャンバスに描画すると、元のサイズが使用されます。

1. それらが300ピクセルの最大の高さや幅をキャンバスに描かれているように、JavaScriptを使用して、これらの画像のサイズを変更：

   がする方法があります。

AND

可変サイズの画像と300×300の正方形を完全に内部に含まれるようにキャンバスは、その内部リサイズ画像との300×300の寸法を保持持ちそれは作成されますか？

（あなたは様々な画像にドロップすると、彼らが収まるようにサイズを変更300×300 Photoshopファイルを作る考えて）

はJavascriptを/キャンバスでさえも可能、このですか？ここで

EDIT

は、私は受け入れ答えに基づいて使用して終了コードです：

var ssItems = [exampleUrls], //array of image paths 
imgHolder = document.getElementById("img-holder"); 

for (var i = 0; i < ssItems.length; i++) { 
      var img = new Image(), 
      imgSrc = "/ItemImages/Large/" + ssItems[i] + ".jpg", 
      imgW, 
      imgH; 
      img.src = imgSrc; 
      img.onload = function() { 
       var canvas = document.createElement("canvas"), 
       ctx = canvas.getContext("2d"); 
       canvas.setAttribute("class", "img-canvas"); 
       canvas.setAttribute("width", "300"); 
       canvas.setAttribute("height", "300"); 
       imgHolder.appendChild(canvas); 
       imgW = (canvas.height * this.width)/this.height; 
       imgH = (canvas.width * this.height)/this.width; 
       if (this.height > this.width) { 
       ctx.drawImage(this, canvas.width/2 - imgW/2, 0, imgW, canvas.height); 
       } else { 
       ctx.drawImage(this, 0, canvas.height/2 - imgH/2, canvas.width, imgH); 
       } 
      } 

Answer 1

私はシナリオが上記で説明一致させようとフィドルを作成しました。

あなたはそれに見てみることができ

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

var image = new Image(); 
image.src = 'http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg'; 

// calculates width and height with respect to canvas 
var width = (canvas.height * image.width)/image.height; 
var height = (canvas.width * image.height)/image.width; 

// takes width or height full choosing the larger value and centers the image 
if(image.height > image.width){ 
    ctx.drawImage(image, canvas.width/2 - width/2, 0, width, canvas.height); 
}else{ 
    ctx.drawImage(image, 0, canvas.height/2 - height/2, canvas.width, height); 
} 

：https://jsfiddle.net/q8qodgmn/1/