Display image in Canvas before Upload

PloMar
Posts: 48

Display image in Canvas before Upload

Hello,
I want to display a file (image) in canvas before it is uploaded.
The preview action in canvas should be executed all in the browser without using Ajax to upload the image.
- I have this html code with the form and canvas:

Code: Select all

<form action="#" method="post" enctype="multipart/form-data">
  <input type="file" name="file_up" id="file_up" /><br>
  <input type="submit" value="Upload">
</form>
<canvas width="800" height="600" id="cnv1"></canvas>

- Is it possible to add an image inside canvas before upload it to the server, using javaScript?
Any example or ideas?
Thanks.

Admin
Hi,
You can use URL.createObjectURL() on the File from your <input> to generate a blob object URL.
Generated URL will be like: "blob:http%3A//localhost/7514bc84-678d3-4cf0-a0df-2de016827890".
Pass this URL to the "src" of an <img> element in page to tell the browser to load the provided image. Then just get the image from that <img> and add it in canvas.
Here's an example:

Code: Select all

<form action="#" method="post" enctype="multipart/form-data">
  <input type="file" name="file_up" id="file_up" /><br><br>
  <input type="submit" value="Upload">
  <div id="pic1"></div>
</form>
<canvas width="350" height="250" id="cnv1"></canvas>
<script>
/* Display image in canvas before upload (from: http://coursesweb.net/ ) */
var cnv1 = document.getElementById('cnv1');  // get the canvas element

// to clear the canvas
function clearCanvas() {
  var ctx = cnv1.getContext('2d');     // gets reference to canvas context
  ctx.beginPath();    // clear existing drawing paths
  ctx.save();         // store the current transformation matrix

  // Use the identity matrix while clearing the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, cnv1.width, cnv1.height);

  ctx.restore();        // restore the transform
}

// add image from url in canvas
function addImgCnv(img_elm) {
  if(cnv1.getContext) {
    var ctx = cnv1.getContext('2d');

    // get a reference to the image, then add it in canvas context
    ctx.drawImage(img_elm, 0, 0, img_elm.width, img_elm.height);
  }
}

// register onchange event to #file_up
document.getElementById('file_up').addEventListener('change', function(){
  clearCanvas();  // to clear the canvas context

  // create <img> with a blob-url address of the "file", made with createObjectURL()
  // Generated URL will be like: blob:http%3A//localhost/7514bc84-678d3-4cf0-a0df-2de016827890
  document.getElementById('pic1').innerHTML = 'LOADING...<img src="' + window.URL.createObjectURL(this.files[0]) + '" alt="Image" id="img1" style="display:none" />';
  // after the image is loaded, call addImgCnv() to add it in canvas
  document.getElementById('img1').onload = function(){
    addImgCnv(document.getElementById('img1'));
    document.getElementById('pic1').innerHTML = '';  // clear the #pic1
  }
});
</script>

- Demo (Select a file for upload):

- If you want a more complete JS script that displays an image file in canvas before upload, see the script from this page: http://coursesweb.net/javascript/display-image-file-canvas-check-before-upload_s2 , it also checks the file type (extension) and image size (width /height) in browser, before upload.

Adv. Posts: 01

Similar Topics