如何调整画布上居中的图像的尺寸？

Question

我下面的代码将获取上载的图像并将其放在画布上居中，它可以正常工作，但是我无法更改实际图像的大小。 我希望能够上传图像，然后将其居中缩小一个百分比或一个像素。

现在，它的工作方式是上传图像，并且图像会自动填充在画布上。 最终产品将返回我将使用C＃转换的base64字符串。

任何帮助将是巨大的，谢谢。

Codepen链接

HTML：

<input type="file">

使用Javascript：

$("input").on("change", function(e) {
  var file = this.files[0];
  if (!file) return;
  var fileReader = new FileReader();
  fileReader.onload = () => {
    var image = new Image();
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      var context = canvas.getContext("2d");

      // Change Background
      context.beginPath();
      context.rect(0, 0, 1000, 1000);
      context.fillStyle = "#7D8491";
      context.fill();

      // Draw Logo      
      context.drawImage(image, canvas.width / 2 - image.width / 2,
        canvas.height / 2 - image.height / 2);

      // Append to body
      $("body").append(canvas);

      // Open base64 url
      //window.open(canvas.toDataURL("image/png"));
    };
    image.src = fileReader.result;
  };
  fileReader.readAsDataURL(file);
  var canvas = document.createElement("canvas");
});

Answer 1

我只需要将位置和实际的宽度/高度除以要缩小图像的百分比即可。

// Draw Logo      
context.drawImage(
    image, 
    canvas.width / 2 - image.width * .75 / 2,
    canvas.height / 2 - image.height * .75 / 2,
    image.width * .75, image.height * .75
);