javascript - 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() 从原始大小的 Canvas 创建了一个新图像。新图像虽然缩小了，但是总的维度还是原图像的维度，所以剩余的空间是透明的。然后我将这张图片设置并剪辑到一个新的 Canvas 中。生成的 Canvas 具有正确大小的图像，可以按所需尺寸复制和粘贴。

如果下面的代码片段没有在新 Canvas 中显示图像，请尝试以下似乎运行良好的 fiddle :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>