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

Question

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

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

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

Codepen Link

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