How to use Data URI to copy canvas as image or another canvas

Question

How to use Data URI to copy canvas as image or another canvas

9.4k views Asked by Hemantsom At 05 September 2013 at 11:34

I converted an image to canvas and made changes to it and want to convert the canvas with changes to a Data URI and use that for the source of image object or another canvas

I am using the following code to do so but do not get any results. Please suggest any other approach I can use.

Code:

function onPhotoURISuccess(imageURI) {

        var largeImage = document.getElementById('testImage'); //image object

        var canvas = document.getElementById('canvasPnl');// source canvas
        var context= canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
            context.drawImage(imageObj,0,0,300,300 );
            context.fillStyle="#FFFFFF";
            context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
            context.fillText(new Date(), 0, 20);
            context.save();
        };
        imageObj.src=imageURI;

        var img_uri= canvas.toDataURL("image/png");
        var image = new Image();
        image.src =img_uri;
        largeImage.src=img_uri;

        var canvas2 = document.getElementById('canvasPnl2');//destination canvas
        var context2= canvas2.getContext("2d");
        context2.drawImage(image,0,0);

}

Original Q&A

There are 2 answers

AudioBubble On 05 September 2013 at 19:04

If you simply want to draw a canvas onto another canvas there is no need to convert it to image first. Just use the source canvas directly as an argument to drawImage:

context2.drawImage(canvas, 0, 0);

If you absolutely want to convert it to image first you only need to modify a few lines to handle the asynchronous nature of image loading:

var img_uri= canvas.toDataURL("image/png");
var image = new Image();
var canvas2;    /// put them here so they are available outside onload below
var context2;

/// put it in a onload here as well
image.onload = function() {
    canvas2 = document.getElementById('canvasPnl2');//destination canvas
    context2= canvas2.getContext("2d");
    context2.drawImage(image,0,0);
}

image.src =img_uri;

A small note: some versions of Chrome has a bug with new Image. For this reason consider using document.createElement('image') instead.

**markE** · Accepted Answer · 2013-09-05 15:09:59

You've almost got it.

enter image description here

Since you’re generating a second image object (var image), you must also do a second onload:

  var imageObj = new Image();
  imageObj.onload = function(){

      ...

      var image = new Image();
      image.onload=function(){

          ...

      }
      image.src=canvas.toDataURL(); // .png is the default


  };
  imageObj.crossOrigin="anonymous";
  imageObj.src=imageURI;

Also, you have a context.save in there without a context.restore (usually they are paired).

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ne4Up/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
    img{border:1px solid blue;}
</style>

<script>
$(function(){

    var lat="lat";
    var lon="long";

    onPhotoURISuccess("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png");

    function onPhotoURISuccess(imageURI) {

            var largeImage = document.getElementById('testImage'); //image object

            var canvas = document.getElementById('canvasPnl');// source canvas
            var context= canvas.getContext("2d");
            var imageObj = new Image();
            imageObj.onload = function(){
                context.drawImage(imageObj,0,0,100,100 );
                context.fillStyle="#FFFFFF";
                context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
                context.fillText(new Date(), 0, 20);


    //            context.save(); // where's the matching context.restore();


                var image = new Image();
                image.onload=function(){
                    var canvas2 = document.getElementById('canvasPnl2');//destination canvas
                    var context2= canvas2.getContext("2d");
                    context2.drawImage(image,0,0);
                    largeImage.src=canvas2.toDataURL();
                }
                image.src=canvas.toDataURL(); // .png is the default


            };
            imageObj.crossOrigin="anonymous";
            imageObj.src=imageURI;


    }        

}); // end $(function(){});
</script>

</head>

<body>
    <p>Pnl</p>
    <canvas id="canvasPnl" width=100 height=100></canvas>
    <p>Pnl2</p>
    <canvas id="canvasPnl2" width=100 height=100></canvas>
    <p>testImage</p>
    <img id=testImage src="houseicon.png" width=100 height=100 >
</body>
</html>

TechQA.

How to use Data URI to copy canvas as image or another canvas

There are 2 answers

Related Questions in HTML

Related Questions in CANVAS

Related Questions in HTML5-CANVAS

Related Questions in DATA-URI

Related Questions in DATA-URL

Popular Questions

Popular Tags

Trending Questions