Question

我下面的代码将采用上传的图像并将其放在画布上，它正常工作，但我无法更改实际图像的大小。我希望能够上传图像，然后按照百分比或像素向下缩放图像。

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

任何帮助都会很棒，谢谢。

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
);

如何在画布上调整居中图像的大小？

1 个答案: