PCから画像をアップロードしてキャンバスに描画するにはどうすればよいですか？

Question

タイトルは基本的に私の質問です。私は表示するコードがありません（私はどこから始めるべきか分からないでしょう）。そして、これはすべて純粋なJavaScriptである必要があります。

Answer 1

drawImage関数を探します（w3schoolsをお勧めします）。あなたのJavaScriptで

最初にキャンバス

const canvas = document.getElementById("canvasID"); 

に取得し、コンテキストを使用して、上のdrawImage関数を呼び出したいものであるキャンバス

const context = canvas.getContext("2d"); 

のコンテキストをthebする必要があります。

context.drawImage(image, xPos, Ypos); 

あなたがdrawImageメソッドに渡す画像はこの方法をロードする必要があります：私はそれを行うだろう

const image = new Image(); 
image.src = "path/image.jpg"; 
image.addEventListener('load',() => 
{ 
    context.drawImage(image, xPos, yPos); 
}); 

方法は、次のとおりです。

window.addEventListener('load',() => 
{ 
    const canvas = document.getElementById("canvasID"); 
    const ctx = canvas.getContext("2d"); 
    const image = new Image(); 
    image.addEventListener('load',() => 
    { 
     ctx.drawImage(image, xPos, yPos); 
    }); 
});