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

我正在尝试制作解决方案，这需要我能够在图像上绘制。Sketch.js将画布复制到剪贴板

我正在使用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>

来源

2015-11-05 Robin

对我来说不清楚。该代码做了什么？你想要它做什么？它在哪里失败？请详细说明一下。 – kebs

该代码是一个背景的网站，sketch.js在背景上绘制线条。然后我想保存在剪贴板中创建的图片，无论是图像还是base64代码。 – Robin

复制到剪贴板很简单，但它确实需要用户交互。它不能自动完成，或隐藏数据，因为这会造成重大的安全风险。这表示有一个使用闪光的工作，但我个人希望这个洞很快就会被插上。

所以要解决。添加一个textarea和一个标签为click的按钮。图像被复制到textarea，单击按钮选择文本区域中的文本并通过document.execCommand('cut');发出cut命令，您可以使用“复制”，但剪切会提供一些反馈。

我试图隐藏textarea的display:none但块切，我曾尝试发行代码click事件，这也阻止了剪切/复制命令

// 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.

只在Chrome上进行测试，并希望这有助于。

来源

2015-11-05 21:13:54 Blindman67

在我的Chrome 55中，它仅将dataURI作为字符串复制。 – benkol

@benkol这是正确的，URL的只能是字符串，不管它们是Base64编码的图像数据还是资源位置。 – Blindman67

对不起，我以为OP想复制实际的图像 – benkol

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

回答

相关问题