Javascript: 固定大小的可变大小图像 canvas

Question

我有一个固定的 HTML5 canvas，尺寸为 300x300。我正在通过 Javascript.

调整页面上其他图像的大小，使其最大 widths/heights 为 300px（取决于哪个尺寸更大）

不过，这实际上并没有调整源图像的大小，当我在 canvas 上绘制它们时，使用的是原始大小。

有没有办法：

使用 Javascript 调整这些图像的大小，以便将它们绘制到最大高度或宽度为 300 像素的 canvas。

和

让 canvas 保留其 300x300 的尺寸，并将调整后的图像放入其中，以便创建一个 300x300 的正方形，其中完全包含可变大小的图像？

（考虑制作一个 300x300 的 Photoshop 文件，您可以在其中放入各种图像并调整大小以适应）

Javascript/canvas 这甚至可能吗？

编辑

这是我根据接受的答案最终使用的代码：

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

我创建了 fiddle 来尝试匹配上面解释的场景。

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/

Javascript: 固定大小的可变大小图像 canvas

Javascript: Variable-sized image in fixed-sized canvas

html

javascript

canvas

image-scaling