Sketch.js将画布复制到剪贴板 [英] 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.
我使用sketch.js。
问题是我需要复制Base64图像，而不是查看它。所以我可以将它粘贴到另一个程序。
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.
有这个吗？
是一个具有一个背景的网站，而sketch.js是在背景上绘制线条。然后我想保存在剪贴板中创建的图片，无论是图片或base64代码。
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>
推荐答案
很容易复制到剪贴簿，需要用户交互。它不能自动完成，或者隐藏数据，因为这将带来重大的安全风险。这说，有一个使用闪光灯的工作，但我个人希望孔很快就被插入。
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.
所以对的解决方案。
添加一个textarea和一个标记为click的按钮。将图像复制到 textarea ，单击按钮选择textarea中的文本，并通过命令发出 cut code> document.execCommand（'cut'）;
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.
我可以使用'copy'尝试隐藏textarea display：none 但是阻止了剪切，我试图发出点击事件的代码，也阻止了cut / copy命令
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.
希望这有助于。
这篇关于Sketch.js将画布复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
