2

i'm quite new in the interaction between JS and Html and I'd like to know if it is possible to Upload an image through an HTML (a button or dropping it), and Display on JS Canvas so that I can modify it through Javascript pure, no jQuery.

So I can for example call the image like this: Image(img, 0, 0).. add a background or a point on it when the mouse is pressed.

I know that what I'm asking, and how I'm asking, can sound silly, but as i said I'm new in this subject.

I will appreciate any kind of help, as for example a link to similars question.

Thanks

Giovanni

Gio Vanni
  • 21
  • 1
  • 3
  • 1
    Post what you have done so far. – CaptainHere Mar 05 '17 at 18:05
  • check this out [stackoverflow: javascript-upload-image-file-and-draw-it-into-a-canvas](http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-draw-it-into-a-canvas) – Himanshu Mar 05 '17 at 18:24
  • But still the image is shown on the html canvas, how could i like add a point on the Image through Javascript ? I'm in: draw the image through javascript Function Draw – Gio Vanni Mar 05 '17 at 19:20
  • Possible duplicate of [javascript: upload image file and draw it into a canvas](http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-draw-it-into-a-canvas) – rene Apr 02 '17 at 19:24

2 Answers2

2

Maybe, you could try something like this ...

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>
m87
  • 4,445
  • 3
  • 16
  • 31
-1

The link to the original post: 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>
Community
  • 1
  • 1
Himanshu
  • 490
  • 1
  • 8
  • 17
  • Hi Thank you so much, i won't upload what i did for now cause it's embarassing, But still the image is shown on the html canvas, how could i like add a a point on the Image through Javascript ? – Gio Vanni Mar 05 '17 at 18:56
  • see [stackoverflow: drawing-a-dot-on-html5-canvas](http://stackoverflow.com/questions/7812514/drawing-a-dot-on-html5-canvas) You're already getting the context of the canvas in `context ` variable. – Himanshu Mar 05 '17 at 19:44
  • So, once I choose the file, there is no way to preload it and then showing it through the function draw [image(img, 0, 0] like if I had preloaded it in the assets folder ??! – Gio Vanni Mar 05 '17 at 20:04
  • I'd like to work on it through the JS language not through HTML – Gio Vanni Mar 05 '17 at 20:07