Question

我目前正在尝试制作解决方案，这需要我能够在图像上绘制。

我正在使用sketch.js。问题是我需要复制Base64图像而不是查看它。所以我可以将它粘贴到另一个程序中。

有没有解决方案？

编辑：代码是一个具有一个背景的网站，而sketch.js则用于在背景上绘制线条。然后我想保存剪贴板中创建的图片，图像或base64代码。

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

Answer 1

复制到剪贴板很简单，但它确实需要用户交互。它不能自动完成，或者数据隐藏，因为这会带来很大的安全风险。这说有一个使用闪存的工作，但我个人希望很快就会堵塞漏洞。

所以对解决方案。添加textarea和标记为click的按钮。图像将复制到textarea，单击按钮可选择文本区域中的文本，然后通过cut发出document.execCommand('cut');命令，您可以使用＆＃39; copy＆＃39;但是削减了一些反馈。

我试图隐藏textarea display:none但是阻止剪切，我试图在代码中发出click事件，这也阻止了剪切/复制命令

＆＃13;

// 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
})

＆＃13;

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

＆＃13;

仅在Chrome上测试过，希望这会有所帮助。

Sketch.js将画布复制到剪贴板

1 个答案: