Upload/Load image through HTML, and Display on JS Canvas

Question

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

check this out stackoverflow: javascript-upload-image-file-and-draw-it-into-a-canvas — Himanshu
– Himanshu, Commented Mar 5, 2017 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
– Gio Vanni, Commented Mar 5, 2017 at 19:20
Possible duplicate of javascript: upload image file and draw it into a canvas — rene
– rene, Commented Apr 2, 2017 at 19:24

m87 · Accepted Answer · 2017-03-07 22:04:40Z

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>

Community · Accepted Answer · 2017-05-23 12:10:19Z

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

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 5, 2017 at 18:33

Himanshu

4901 gold badge8 silver badges17 bronze badges

4 Comments

Gio Vanni Over a year ago

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 ?

Himanshu Over a year ago

see stackoverflow: drawing-a-dot-on-html5-canvas You're already getting the context of the canvas in context variable.

Gio Vanni Over a year ago

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 Over a year ago

I'd like to work on it through the JS language not through HTML

Collectives™ on Stack Overflow

Upload/Load image through HTML, and Display on JS Canvas

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related