在画布上居中放置图片，并调整画布wdith的50％大小

Question

我试图将图像放在画布上居中，但还要调整图像的大小，使其不等于画布宽度的100％。因此，例如，当前看起来像这样：

我可以将图像居中，如下面的代码所示，但是当我尝试调整其大小时，它看起来像这样：

我想至少拥有它，因此画布周围有填充物，图像位于中间。

    var img = new Image();
    img.onload = function () {
        imgCenterWidth = canvas.width / 2 - img.width / 2;
        imgCenterHeight = canvas.height / 2 - img.height / 2
        ctx.drawImage(img, imgCenterWidth, imgCenterHeight, img.width * 0.7, img.height * 0.7);
    }
    img.src = parent.find('img').attr('src');

    <canvas id="editor-canvas" width=640 height=300>
    </canvas>

我在做什么错了？

Answer 1

您提到想要在图像周围进行一些填充，并且希望将其居中放置，但又不想在图像周围进行多少填充，因此我制作了一个函数，该函数需要填充一定数量并调整图像大小以允许填充

请记住，除非您使用带有方形图像的方形画布，否则只有图像的宽度或高度才会在其自身和画布之间具有确切的填充量。

因此，在下面的示例中，我从您的画布大小和一张尺寸为1280x720的图像开始，该功能会不断缩小边，直到它们小于画布+填充边，同时还要保持比例（因为谁想要扭曲的图像？）

我希望这会有所帮助，如果您有任何疑问或希望进行任何更改，请随时询问。

// Get a reference to our canvas and get the 2d
// context so we can draw an image onto it.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

/**
 * The padding function figures out how much to reduce the image
 * by (if any amount) in order to make it fit onto the canvas width
 * the desired padding.
 *
 * @param {number} padding The least amount of padding to add to add to all sides of the image.
*/
function addImage(padding) {

  const img = new Image();

  // Wait for the image to load, just as you did in your
  // question sample code.
  img.onload = function () {
  
    while (img.width + padding > canvas.width || img.height + padding > canvas.height) {
    
      if (img.width + padding > canvas.width) {
      
        let newWidth = canvas.width - (padding * 2);
        
        img.height = Math.round((img.height / img.width) * newWidth);
        
        img.width = newWidth;
        
      }
      else if (img.height + padding > canvas.height) {
      
        let newHeight = canvas.height - (padding * 2);
        
        img.width = Math.round((img.width / img.height) * newHeight);
        
        img.height = newHeight;
      
      }
    
    }
    
    ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2, img.width, img.height);

  };

  img.src = 'https://i.imgur.com/gOOrvAP.png';

}

addImage(20);

canvas {
  border: 1px solid #000;
}

<canvas id="canvas" width="640" height="300"></canvas>