Search code examples
htmlcanvashtml5-canvasdata-uridata-url

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

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);

}
Solution

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