Forum

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>

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>