Reputation: 11

Sketch.js Copy the canvas to clipboard

I'm currently trying to make a solution, which needs me to be able to draw on top of a image.

I'm using sketch.js. The problem is i need to copy the Base64 image instead of viewing it. So i can paste it into another program.

Is there any solution for this?

EDIT: The code is a website with one background, and sketch.js to draw lines on top of the background. Then i want to save the picture created in my clipboard, either the image or the base64 code.

    <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js"></script>    

    <style>
    body{ background-color: white; }
    #wrapper{positon:relative;}
    #bk,#myCanvas{position:absolute;}
    </style>


            <script>
                $(function(){

                    var c = document.getElementById("myCanvas");
                    var ctx = c.getContext("2d");

                    $('#myCanvas').sketch({ defaultColor: "red" });


                    $('#download').click(function() {
                          var img=document.getElementById('bk');
                          ctx.globalCompositeOperation='destination-over';
                          ctx.drawImage(bk, 0, 0);
                          ctx.globalCompositeOperation='source-over';
                          var html="";
                          html+="<img src='"+c.toDataURL()+"' alt='from canvas'/>";
                          var tab=window.open();
                          tab.document.write(html);
                    });

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




</head>


                <body>
                    <h4>Hold to draw.</h4>
                    <button id=download>Save picture</button>

                        <div id="SketchTools">          

                        <!-- Basic tools -->
                        <a href="#myCanvas" data-color="#000000" title="Black"><img src="img/black_icon.png" alt="Black"/></a>
                        <a href="#myCanvas" data-color="#ff0000" title="Red"><img src="img/red_icon.png" alt="Red"/></a>
                        <a href="#myCanvas" data-color="#00ff00" title="Green"><img src="img/green_icon.png" alt="Green"/></a>
                        <br/>

                        <!-- Size options -->
                        <a href="#myCanvas" data-size="1"><img src="img/pencil_icon.png" alt="Pencil"/></a>
                        <a href="#myCanvas" data-size="3"><img src="img/pen_icon.png" alt="Pen"/></a>
                        <a href="#myCanvas" data-size="5"><img src="img/stick_icon.png" alt="Stick"/></a>
                        <a href="#myCanvas" data-size="9"><img src="img/smallbrush_icon.png" alt="Small brush"/></a>
                        <a href="#myCanvas" data-size="15"><img src="img/mediumbrush_icon.png" alt="Medium brush"/></a>
                        <a href="#myCanvas" data-size="30"><img src="img/bigbrush_icon.png" alt="Big brush"/></a>
                        <a href="#myCanvas" data-size="60"><img src="img/bucket_icon.png" alt="Huge bucket"/></a>
                        <br/>


                    </div>

                    <div id='wrapper'>
                        <img crossOrigin='anonymous' id=bk src='picturehere'>
                        <canvas id="myCanvas" width=800 height=600></canvas>
                    </div>
                </body>
</html>

Upvotes: 1

Answers (1)

Blindman67

Reputation: 54026

It is simple to copy to the clipboard but it does require user interaction. It can not be done automatically, or the data hidden, as that would pose a significant security risk. That said there is a work around using flash but personally I hope that hole is plugged soon.

So to the solution. Add a textarea and a button labeled click. The image is copied to the textarea, clicking the button selects the text in the textarea and issue the cut command via document.execCommand('cut'); you could use 'copy' but cut gives some feed back.

I have tried to hide the textarea display:nonebut that blocks the cut, I have tried to issue the click event in code, that also blocked the cut/copy command

// this function is just here to draw a smile and add get the dataURL
// for the demo. It has no relevance to the problem
var smile = function(){ 
    var image = document.createElement("canvas"); 
    image.width = 32;
    image.height =32;
    var ct = image.getContext("2d");  // tack the context onto the image
    var bp = function(){ct.beginPath();}
    var p = Math.PI;
    var pp = Math.PI*2;
    var cx = cy = 16;
    var s = function(){ct.stroke();}
    var f = function(){ct.fill();}
    var a = function(a1,a2,a3){bp(); ct.arc(cx,cy,a1,a2,a3)};
    var af = function(a1,a2,a3){bp(); ct.arc(cx,cy,a1,a2,a3);f()};
    var b = "black"
    var w = "white";
    var y = "yellow";
    var col = function(a1,a2,a3){ ct.fillStyle = a1;ct.strokeStyle = a2;ct.lineWidth=a3;}
    col(b,y);af(16,0,pp);col(y,b,2);af(14,0,pp);a(10,0.2,p-0.2);s();cx = 8;cy = 11;col(b,b,1);af(6,0,pp);col(w,b,1);af(5,0,pp);col(b,b,1);af(2,0,pp);cx = 24;af(6,0,pp);col(w,b,1);af(5,0,pp);col(b,b,1);af(2,0,pp);


    // show the URL
    imageShow.src = image.toDataURL("image/png");
    // add the canvas URL base64 to the text area
    textA.textContent = image.toDataURL("image/png");
        
}    
//' get the elements we need
var textA = document.querySelector('#imgDat'); // text area that holds the URL
var imageShow = document.querySelector('#showIt'); // just to show whats being copied
var button = document.querySelector('#copyBut'); // the button to do it all;
smile(); // Create an image display it and put it in textArea
button.addEventListener("click",function(){
  textA.select();            // select the content of the textArea
  document.execCommand('cut');  // cut the selected content into
                                // cut/paste buffer
})

<textarea id="imgDat" ></textarea>
<img id="showIt"><input id="copyBut" type="button" value="COPY"><br>
Click to copy image as dataURL to clipboard.

Only Tested on chrome, and hope this helps.

Upvotes: 2

Sketch.js Copy the canvas to clipboard

Answers (1)

Related Questions