我目前正在尝试制定一个解决方案，这需要我能够在图像上绘图。
我正在使用 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>
最佳答案
复制到剪贴板很简单，但确实需要用户交互。它不能自动完成，也不能隐藏数据，因为那样会带来重大的安全风险。这就是说可以解决使用闪存的问题，但我个人希望这个漏洞能尽快被堵上。
所以到解决方案。
添加一个文本区域和一个标记为单击的按钮。图像被复制到 textarea，点击按钮选择 textarea 中的文本并通过 document.execCommand('cut'); 您可以使用“复制”，但剪切会提供一些反馈。cut 命令发出
我试图隐藏文本区域display:none但是这阻止了剪切，我试图在代码中发出点击事件，这也阻止了剪切/复制命令
// 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 上测试过，希望对您有所帮助。
关于javascript - Sketch.js 将 Canvas 复制到剪贴板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33547009/