javascript: upload image file and draw it into a canvas

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

More Related Contents:

  1. How to set a value to a file input in HTML?
  2. How do I add a simple onClick event handler to a canvas element?
  3. How To Save Canvas As An Image With canvas.toDataURL()?
  4. How to add image to canvas
  5. Remember and Repopulate File Input [duplicate]
  6. How to resolve the C:\fakepath?
  7. Simulation background-size: cover in canvas
  8. Client Checking file size using HTML5?
  9. HTML5 Canvas to PNG File
  10. Cross-origin data in HTML5 canvas
  11. drag drop files into standard html file input
  12. Uploading ‘canvas’ image data to the server
  13. Can I get image from canvas element and use it in img src tag?
  14. How to save image from canvas with CSS filters
  15. HTML5 canvas ctx.fillText won’t do line breaks?
  16. Is it possible to programmatically detect size limit for data url?
  17. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  18. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  19. Using Canvas to animate a sorting algorithm in JS
  20. Detect if user clicks inside a circle
  21. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  22. Javascript function to Rotate a base 64 image by X degrees and return new base64
  23. Drawing rotated text on a HTML5 canvas
  24. canvas.toDataURL() Security Error The operation is insecure
  25. HTML5 Dynamically create Canvas
  26. Snap edges of objects to each other and prevent overlap
  27. Image Manipulation – add image with corners in exact positions
  28. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  29. HTML Canvas Full Screen
  30. JavaScript runtime error: ‘$’ is undefined

Leave a Comment