Drawing an image from a data URL to a canvas

by

Given a data URL, you can create an image (either on the page or purely in JS) by setting the src of the image to your data URL. For example:

var img = new Image;
img.src = strDataURI;

The drawImage() method of HTML5 Canvas Context lets you copy all or a portion of an image (or canvas, or video) onto a canvas.

You might use it like so:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

Edit: I previously suggested in this space that it might not be necessary to use the onload handler when a data URI is involved. Based on experimental tests from this question, it is not safe to do so. The above sequence—create the image, set the onload to use the new image, and then set the src—is necessary for some browsers to surely use the results.

More Related Contents:

  1. html5: copy a canvas to image and back
  2. HTML5 Canvas Rotate Image
  3. HTML5 Pre-resize images before uploading
  4. Resize image with javascript canvas (smoothly)
  5. Should setting an image src to data URL be available immediately?
  6. How do you stretch an image to fill a while keeping the image’s aspect-ratio?
  7. Can I get image from canvas element and use it in img src tag?
  8. Load image from url and draw to HTML5 Canvas
  9. Wrap an image around a cylindrical object in HTML5 / JavaScript
  10. canvas- Cropping images in different shapes
  11. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  12. Resizing an image in an HTML5 canvas
  13. Does HTML5/Canvas Support Double Buffering?
  14. CV – Extract differences between two images
  15. Gmail’s new image caching is breaking image links in newsletter
  16. How do you merge images into a canvas using PIL/Pillow?
  17. Draw border around nontransparent part of image on canvas
  18. Can I set a users profile image using the Facebook API?
  19. How to embed images in a single HTML / PHP file?
  20. Gradient Stroke Along Curve in Canvas
  21. Multiple images display (slideshow) on wpInstalling Page under ProgressGauge bar in Inno Setup
  22. HTML : Is there any way to show images in a textarea?
  23. Change image in HTML page every few seconds
  24. CSS align images and text on same line
  25. clearing circular regions from HTML5 Canvas
  26. Image Warping – Bulge Effect Algorithm
  27. Tooltip on image
  28. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  29. How to set a microdata image property, without letting the browser download the image?
  30. What are all the differences between src and data-src attributes?

Leave a Comment