Центрировать изображение на холсте и изменять его размер на 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>