javascript - 如何绘制与红色 block 相同的图像

Question

图像上有一个红色 block ，大小为50*50 ，图像原点大小为320*180 ，图像元素大小为200*113

现在我想得到红色 block 并在 Canvas 上绘制，但我不知道如何计算，请告诉我why和how !!

这里是我的示例代码

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;
  const ratio = naturalWidth / img.offsetWidth;
  const heightRatio = naturalHeight / img.offsetHeight;
  const canvasRatio = naturalWidth / c.width;
  const canvasYRatio = naturalHeight / c.height;
  console.log(ratio, heightRatio, canvasRatio);
  const r = 1/(naturalWidth/naturalHeight);
  console.log(r);
  const width = 50;
  const height = 50;
  const top = 50 * heightRatio;
  const left = 90 * ratio;
  
  ctx.drawImage(img, -left, -top);
};

body{
position: relative;
}

<img id="scream" src="https://img.youtube.com/vi/uwMQRAC1JE8/mqdefault.jpg" alt="The Scream" width="200">
<div style="
    position: absolute;
    left: 90px;
    top: 50px;
    width: 50px;
    height: 50px;
    border: 1px solid red;
"></div>
<canvas id="myCanvas" width="50" height="50" style="border:1px solid #d3d3d3;display:block" />

Answer 1

您需要使用ctx.drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)的长版本为了能够裁剪和调整原始图像的大小。

简短的 2 个参数版本只是以原始尺寸绘制原始图像，并在目标上有一些偏移，但您也需要在输出上应用调整大小。

所以使用长版本你可以这样做

 ctx.drawImage(img,
 // source
   x * ratioW,
   y * ratioH,
   width * ratioW,
   height * ratioH,
 // destination
   0,
   0,
   width,
   height
 );

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;
  const ratio = naturalWidth / img.offsetWidth;
  const heightRatio = naturalHeight / img.offsetHeight;
  const canvasRatio = naturalWidth / c.width;
  const canvasYRatio = naturalHeight / c.height;
  const r = 1/(naturalWidth/naturalHeight);
  console.log(r);
  const width = 50;
  const height = 50;
  const top = 50 * heightRatio;
  const left = 90 * ratio;
  
  ctx.drawImage(
    img,
    left, top, width * ratio, height * heightRatio,
    0, 0, width, height
  );
};

body{
position: relative;
}

<img id="scream" src="https://img.youtube.com/vi/uwMQRAC1JE8/mqdefault.jpg" alt="The Scream" width="200">
<div style="
    position: absolute;
    left: 90px;
    top: 50px;
    width: 50px;
    height: 50px;
    border: 1px solid red;
"></div>
<canvas id="myCanvas" width="50" height="50" style="border:1px solid #d3d3d3;display:block" />