キャンバス上の中央の画像のサイズを変更するにはどうすればよいですか？

Question

以下のコードは、アップロードされた画像をキャンバス上に配置して動作させていますが、実際の画像のサイズを変更することはできません。私は、画像をアップロードし、その画像を中心にしたパーセンテージまたはピクセルで縮小したいと考えています。

今のところ画像をアップロードして自動的にキャンバスに表示されます。最終的な製品は、C＃を使用して変換するbase64文字列を返します。

ご協力いただきありがとうございます。

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