Draw a data URL as an image on HTML5 canvas

If you have a data URL, you can create an image on the canvas. This can be done as shown in the following code snippet -

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

drawImage() method draws an image, canvas or video onto the canvas. The drawImage() method can also draw a portion of the image, and/or increase/decrease the image size.

The code given below also works for this sequence - create image, set onload to use new image, then set src -

// load image from data url
Var Obj = new Image();
Obj.onload = function() {
   context.drawImage(myImg, 0, 0);
};
Obj.src = dataURL;

The above is the detailed content of Draw a data URL as an image on HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!