How to upload image into HTML5 canvas

by

I assume you mean, to load an image into the canvas and not uploading the image from the canvas.

It’d probably be a good idea to read through all the canvas articles they have over here
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

But basically what you want to do is create an image in javascript, and set the image.src = to whatever the file location is. In the case of loading images from the user on their end, you’re going to want to use the File System API.

Threw together a brief example here: http://jsfiddle.net/influenztial/qy7h5/

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

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Resize HTML5 canvas to fit window
  3. Resize image with javascript canvas (smoothly)
  4. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  5. HTML5 Canvas vs. SVG vs. div
  6. HTML5 Canvas toDataURL returns blank
  7. How do I fix blurry text in my HTML5 canvas?
  8. Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)
  9. PHP+JS: How to do Fileuploads in HTML Form as Content-Type Multipart (via JS)?
  10. HTML5 Canvas camera/viewport – how to actually do it?
  11. canvas2d toDataURL() different output on different browser
  12. Cropping images in the browser BEFORE the upload [closed]
  13. Image manipulation and texture mapping using HTML5 Canvas?
  14. event.offsetX in Firefox
  15. Web Workers and Canvas
  16. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  17. addEventListener for keydown on Canvas
  18. Load image from url and draw to HTML5 Canvas
  19. Save canvas as jpg to desktop [duplicate]
  20. HTML canvas – drawing disappear on resizing
  21. How to flip images horizontally with HTML5
  22. how to draw a wheel of fortune?
  23. canvas getContext(“2d”) returns null
  24. clearing circular regions from HTML5 Canvas
  25. How to detect shape on a transparent canvas?
  26. How can I get DPI from image in JS?
  27. HTML5 Canvas API – formatting individual words with italics
  28. Scaling an image to fit on canvas
  29. True Isometric Projection with HTML5 Canvas
  30. Split text into pages and present separately (HTML5)

Leave a Comment