HTMLで画像をアップロード/読み込み、JSキャンバスに表示

Question

JSとHTMLのやりとりがかなり新しいです。HTMLで画像をアップロードすることができるかどうかを知りたいのですが）、そしてJS Canvasに表示することで、jQueryを使わずにJavascriptを使って変更することができます。

イメージを次のように呼び出すことができます。Image（img、0、0）..マウスを押したときに背景またはポイントを追加します。

私は尋ねていることと、私が求めていることは、ばかげていることは知っていますが、私はこの主題では新しいと言っています。

私は、例えばsimilarsの質問へのリンクなど、あらゆる種類のヘルプに感謝します。

おかげ

ジョバンニ

Answer 1

元記事へのリンク：stackoverflow: javascript-upload-image-file-and-draw-it-into-a-canvas

コード：

function el(id){return document.getElementById(id);} // Get elem by ID 
 

 
var canvas = el("canvas"); 
 
var context = canvas.getContext("2d"); 
 

 
function readImage() { 
 
    if (this.files && this.files[0]) { 
 
     var FR= new FileReader(); 
 
     FR.onload = function(e) { 
 
      var img = new Image(); 
 
      img.onload = function() { 
 
      context.drawImage(img, 0, 0); 
 
      }; 
 
      img.src = e.target.result; 
 
     };  
 
     FR.readAsDataURL(this.files[0]); 
 
    } 
 
} 
 

 
el("fileUpload").addEventListener("change", readImage, false);

<input type='file' id="fileUpload" /> 
 
<canvas id="canvas" width="900" height="600"></canvas>

Answer 2

たぶん、あなたはこのような何かを試みることができる...

var fileUpload = document.getElementById('fileUpload'); 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 

 
function readImage() { 
 
    if (this.files && this.files[0]) { 
 
     var FR= new FileReader(); 
 
     FR.onload = function(e) { 
 
      var img = new Image(); 
 
      img.src = e.target.result; 
 
      img.onload = function() { 
 
      ctx.drawImage(img, 0, 0, 512, 512); 
 
      }; 
 
     };  
 
     FR.readAsDataURL(this.files[0]); 
 
    } 
 
} 
 

 
fileUpload.onchange = readImage; 
 

 
canvas.onclick = function(e) { 
 
    var x = e.offsetX; 
 
    var y = e.offsetY; 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = 'black'; 
 
    ctx.arc(x, y, 5, 0, Math.PI * 2); 
 
    ctx.fill(); 
 
};

#canvas { 
 
    border: 1px solid black; 
 
    margin-top: 10px; 
 
}

<input type='file' id="fileUpload"/> 
 
<canvas id="canvas" width="512" height="512"></canvas>