通過HTML上傳/加載圖像，並在JS Canvas上顯示

我在JS和Html之間的交互方面相當新穎，我想知道是否可以通過HTML上傳圖像（按鈕或放置它），並在JS Canvas上顯示，這樣我就可以通過純Javascript修改它，不需要jQuery。通過HTML上傳/加載圖像，並在JS Canvas上顯示

所以我可以例如像這樣調用圖像：Image（img，0，0）..在按下鼠標時添加背景或點。

我知道我在問什麼，我怎麼問，聽起來可能很愚蠢，但正如我所說我是這個主題的新人。

我會很感激任何形式的幫助，例如一個類似問題的鏈接。

感謝

喬瓦尼

來源

2017-03-05 Gio Vanni

後你已經完成的工作。 – CaptainHere

看看這個[stackoverflow.com] javascript-upload-image-file-and-draw-into-a-canvas]（http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-繪製成畫布） – Himanshu

但是，圖像仍然顯示在HTML畫布上，我怎麼可以通過Javascript在圖像上添加點？我在：通過javascript繪製圖像功能繪製 –

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

來源

2017-03-05 18:33:23 Himanshu

嗨，非常感謝，我不會上傳我現在做的事情，因爲它現在令人尷尬，但是，仍然在html畫布上顯示圖像，我怎麼能喜歡添加通過Javascript的圖像點嗎？ –

請看[stackoverflow：drawing-a-dot-on-html5-canvas]（http://stackoverflow.com/questions/7812514/drawing-a-dot-on-html5-canvas）你已經獲得了上下文在'context'變量中的畫布。 – Himanshu

所以，一旦我選擇了文件，就沒有辦法預先加載它，然後通過函數draw [image（img，0，0）來顯示它，就像我已經將它預加載到assets文件夾中一樣！ –

也許，你可以嘗試這樣的事情......

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>

來源

2017-03-05 21:31:36 m87

通過HTML上傳/加載圖像，並在JS Canvas上顯示

回答

相關問題