Upload image file and draw it into a canvas

Question

I work at a web application for painting images. I use a CANVAS element and JavaScript to draw on it, but I have a problem: how can I load an image from the PC of the user and draw it on the canvas? I don't want to save it on the server, only on the webpage.

Here is a shortened version of the code:

HTML:

Open file: <input type="file" id="fileUpload" accept="image/*" /><br />
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;">
  Please open this website on a browser with javascript and html5 support.
</canvas>

JavaScript:

var x = 0;
var y = 0;
var clicked = false;

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

context.strokeStyle = "black";
context.lineCap = "round";

canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false);

takePicture.onchange = function (event) {
  var files = event.target.files,
    file;
  if (files && files.length > 0) {
    file = files[0];
    processImage(file);
  }
};

function processImage(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file)
  reader.onload = function(e) {
    var img = new Image();
    img.onload = function() {
      context.drawImage(img, 100,100)
    }
    img.src = e.target.result;
  }
}

   // functions for drawing (works perfectly well)
function getMousePos(canvas, e) {
  var rect = canvas.getBoundingClientRect();
  x = evt.clientX - rect.left;
  y = evt.clientY - rect.top;
}

function startLine() {
  context.moveTo(x,y);
  context.beginPath();
  clicked = true;
}

function keepLine() {
  if(clicked) {
    context.lineTo(x,y);
    context.stroke();
    context.moveTo(x,y);
  }
}

function drawLine() {
  context.lineTo(x,y);
  context.stroke();
  clicked = false;
}

There's no copyright

Doesn't your code already do this? JavaScript doesn't have filesystem read access (because of security concerns). The user has to explicitly give it a file, typically this is done through <input type="file"> — Halcyon
– Halcyon, Commented Mar 7, 2014 at 16:35
I've tried it, but it didn't work: the image doesn't appear on the canvas. The only thing that happens is that firebug tells me: TypeError: reader.readAsDataUrl is not a function — Aloso
– Aloso, Commented Mar 7, 2014 at 16:45

Roko C. Buljan · Accepted Answer · 2020-06-06 12:57:14Z

34

const EL = (sel) => document.querySelector(sel);
const ctx = EL("#canvas").getContext("2d");

function readImage() {
  if (!this.files || !this.files[0]) return;
  
  const FR = new FileReader();
  FR.addEventListener("load", (evt) => {
    const img = new Image();
    img.addEventListener("load", () => {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.drawImage(img, 0, 0);
    });
    img.src = evt.target.result;
  });
  FR.readAsDataURL(this.files[0]);
}

EL("#fileUpload").addEventListener("change", readImage);

canvas {display: block;}

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

edited Jun 6, 2020 at 12:57

answered Mar 7, 2014 at 16:48

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Varun Sharma Over a year ago

@Roko C. Please tell me how to drag these image in canvas.

Roko C. Buljan Over a year ago

@varunsharma you mean drag+drop from desktop to Canvas?

Varun Sharma Over a year ago

@Roko C. No sir, Actually i am uploading multiple image, But it is not draggable in canvas. Please see this link. stackoverflow.com/questions/34608925/…

Ferose · Accepted Answer · 2014-08-28 20:43:27Z

<html>
<head>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
<script type="text/javascript">
//<![CDATA[ 
window.addEvent('load', function() {
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            c.width = img.width;
            c.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

});//]]>  


</script>
</head>

<body>
<div style="background:#990; width:100%; padding:20px; ">
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
</div>

<canvas id="myCanvas" ></canvas>
</body>
</html>

12Me21 · Accepted Answer · 2022-01-14 22:11:48Z

2

Here is a much simpler method, which doesn't use inefficient data urls:

var canvas = document.getElementById('canvas')
var input = document.getElementById('input')
var c2d = canvas.getContext('2d')

input.onchange=function() {
    var img = new Image()
    img.onload = function() {
        canvas.width = this.width
        canvas.height = this.height
        c2d.drawImage(this, 0, 0)
        URL.revokeObjectURL(this.src)
    }
    img.src = URL.createObjectURL(this.files[0])
}

<input type=file id=input> <br>
<canvas id=canvas></canvas>

answered Jan 14, 2022 at 22:11

12Me21

1,20916 silver badges24 bronze badges

Collectives™ on Stack Overflow

Upload image file and draw it into a canvas

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related