2017-03-05 36 views
1

Ich bin ziemlich neu in der Interaktion zwischen JS und Html und ich würde gerne wissen, ob es möglich ist, ein Bild durch eine HTML hochladen (eine Schaltfläche oder ablegen it), und auf JS Canvas anzeigen, so dass ich es durch Javascript rein, keine jQuery ändern kann.Hochladen/Laden Bild über HTML und Anzeige auf JS Canvas

So kann ich zum Beispiel das Bild wie folgt aufrufen: Bild (img, 0, 0) .. fügen Sie einen Hintergrund oder einen Punkt darauf, wenn die Maus gedrückt wird.

Ich weiß, dass das, was ich frage, und wie ich frage, kann albern klingen, aber wie ich sagte, ich bin neu in diesem Thema.

Ich werde jede Art von Hilfe, wie zum Beispiel einen Link zu ähnlichen Fragen zu schätzen wissen.

Dank

Giovanni

+1

Beitrag, was Sie bisher getan haben. – CaptainHere

+0

checken Sie das aus [stackoverflow: javascript-upload-image-file-and-draw-it-in-a-canvas] (http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and- Draw-it-in-a-Canvas) – Himanshu

+0

Aber immer noch wird das Bild auf der HTML-Leinwand gezeigt, wie könnte ich einen Punkt auf dem Bild durch Javascript hinzufügen? Ich bin in: Zeichnen Sie das Bild durch Javascript Funktion Zeichnen –

Antwort

-1

Der Link zum Original-Beitrag: stackoverflow: javascript-upload-image-file-and-draw-it-into-a-canvas

Code:

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>

+0

Hi Vielen Dank, ich werde nicht hochladen, was ich für jetzt getan habe, es ist peinlich, Aber immer noch wird das Bild auf der HTML-Leinwand gezeigt, wie könnte ich hinzufügen möchten ein Punkt auf dem Bild durch Javascript? –

+0

siehe [stackoverflow: Zeichnung-ein-Punkt-auf-html5-Leinwand] (http://StackOverflow.com/Questions/7812514/Drawing-Adot-on-HTML5-canvas) Sie erhalten bereits den Kontext der Leinwand in 'Kontext' Variable. – Himanshu

+0

Also, sobald ich die Datei auswählen, gibt es keine Möglichkeit, es vorher zu laden und dann durch die Funktion zeichnen [Bild (img, 0, 0], als ob ich es im Anlagenordner geladen hätte ??! –

1

Vielleicht könnten Sie so etwas wie dieses versuchen ...

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>