Display image in Canvas before Upload

[PloMar]

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.

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: https://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: https://coursesweb.net/javascript/displa ... -upload_s2 , it also checks the file type (extension) and image size (width /height) in browser, before upload.