CODEWITHSUNDEEP
javascripthtmlcanvas
user84592
user84592

Reputation: 4882

html5 canvas javascript copy picture

I have a html5 page. It uses JQuery and sketch.js (for free drawing). I am NOT going to connect it to any web server. At this moment, I would like to be use this javascript as desktop application. My purpose is to copy image from one canvas to the other canvas in the same page. After draw something by free hand, I could see url is copied to textarea, but no picture after clicking Show URL link. Could someone give me hints how to make an copy of image from one canvas to the other?

/1/ Source codes, one need to add html tag in the beginning, do not forget <>

<head>
 <title>sketch and free hand drawing</title>
 <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="image/png"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/sketch.js"></script>

/2/One need to add /head above. do not forget <>

<body>
<script>
    function toDo(){
         console.log(document.getElementById("colors_sketch").toDataURL("image/png"));
       document.getElementById("cvs").value=document.getElementById("colors_sketch").toDataURL("image/png");
       document.getElementById("txt").value=document.getElementById("colors_sketch").toDataURL("image/png");
  }   
</script> 
<div class="tools">
   <a href="#colors_sketch" data-download="png" style="float: right; width: 100px;">Download</a>
</div>
<div class="tools">
   <a href="#cvs" style="float: right; width: 100px;" onclick="toDo();">show URL</a>
</div>

<textarea id="txt"></textarea>
<hr/>
<canvas id="colors_sketch" width="800" height="300">hello</canvas>
<hr/>
<canvas id="cvs" width="800" height="300"></canvas>
<script type="text/javascript">
   $(function() {
      $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
        $('#colors_demo .tools').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
      });
      $.each([3, 5, 10, 15], function() {
        $('#colors_demo .tools').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
      });
      $('#colors_sketch').sketch();
   });

/3/ one need to add /script above and /body above and /html above do not forget <>

Upvotes: 0

Views: 2321

Answers (1)

markE
markE

Reputation: 105035

To move an image from one canvas to another, you can simply use drawImage

destinationContext.drawImage(sourceCanvas,0,0);

The pixels from the source canvas will be drawn onto the destination canvas.

A Demo: http://jsfiddle.net/m1erickson/2hb56/

I tried modifying your code, but it appears you also have a design issue.

SketchJS will erase your copied image in preparation for it's own drawings (the copied image is erased).

Example code copying pixels from one canvas to another:

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

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

<script>
    $(function(){

        // get references to canvases and contextx
        sourceCanvas=document.getElementById("source");
        sourceContext=sourceCanvas.getContext("2d");
        destinationCanvas=document.getElementById("destination");
        destinationContext=destinationCanvas.getContext("2d");

        // draw a test image into the source canvas
        var testImg=new Image();
        testImg.onload=function(){
            sourceContext.drawImage(testImg,0,0);
        }
        testImg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";

        // when the button is clicked
        // copy the source canvas onto the destination canvas
        $("#copy").click(function(){
            destinationContext.drawImage(sourceCanvas,0,0);
        })


    }); // end $(function(){});
</script>
</head>
<body>
    <canvas id="source" width=256 height=256></canvas><br>
    <button id="copy">Copy canvas above to canvas below</button><br>
    <canvas id="destination" width=256 height=256></canvas>
</body>
</html>

Upvotes: 2

Related Questions