个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在开发一个应用程序，我想为 svg 提供一个复制按钮，将其作为图像复制到剪贴板，然后粘贴到其他地方。
我尝试使用剪贴板 API，但它有很多安全限制，而且它似乎不适用于 http 并且仅适用于 png。
我还通过使用图像创建一个 div 来尝试 document.execCommand('copy') 但它只在 MS Word 中对我有效，但在 slack 或堆栈溢出中无效(不知道为什么) .
我想通过 Javascript 复制 chrome/firefox 右键单击上下文菜单的复制图像选项的行为。
有什么办法可以做到吗？我对所有想法持开放态度。谢谢!
最佳答案
只是一些提示，而不是实际答案。我使用评论中的信息设置了一个本地示例:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:2px solid green;" width="300" height="300">
</canvas>
<script>
function copyCanvas() {
let canvas = document.getElementById('myCanvas');
canvas.toBlob(function (blob) {
let data = [new ClipboardItem({ [blob.type]: blob })];
navigator.clipboard.write(data).then(function () {
alert('Copied');
}, function (err) {
alert('Not copied');
})
});
}
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
var data = `<svg xmlns="http://www.w3.org/2000/svg" width="300"
height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:50px">' +
'Simply Easy ' +
'<span style="color:blue;">' +
'Learning</span>' +
'</div>' +
'</foreignObject>' +
'</svg>`;
var DOMURL = window.URL || window.webkitURL || window;
var img1 = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img1.onload = function() {
ctx.drawImage(img1, 25, 70);
DOMURL.revokeObjectURL(url);
}
img1.src = url;
setTimeout(copyCanvas, 3000);
</script>
</body>
</html>
这行不通，但它可能是一个开始。如果直接调用 copyCanvas()，没有 setTimeout，我会在 Chrome 中得到一张大小合适的黑色图片。我认为这意味着 Canvas 仍未绘制。随着延迟， Canvas 显示图片，但我收到一条错误消息，说它不能用 toBlob 转换，因为它被污染了。这是解释here .如果可以在服务器中设置 CORS 策略，则可以避免这种污染。我仍然不确定该解决方案的可移植性。
关于javascript - 将 SVG 作为图像复制到剪贴板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64114156/
25
4
0
当尝试复制到剪贴板时，有什么区别 Clipboard.SetData(DataFormats.Text, ""); 和 Clipboard.SetText(""); 最佳答案 SetText 只是 S
我正在尝试将一个对象复制到 Windows 剪贴板上，然后再次关闭。我的代码是这样的: 复制到剪贴板: Clipboard.Clear(); DataObject newObject = new Da
如何在非静态线程中获取剪贴板文本？我有一个解决方案，但我正在尝试获得最干净/最短的方法。正常调用时结果为空字符串。 最佳答案 我会添加一个辅助方法，它可以在 MTA 主线程中将 Action 作为 S
我正在研究Applescript，将上次复制的内容粘贴到任何当前字段中。它将与VoiceOver一起使用，并且关键代码方式(我所知道的唯一方式)并非始终有效。 tell application
我在这里看到: http://www.pgrs.net/2008/1/11/command-line-clipboard-access Linux 和 osx 中有一种方法可以从命令行复制到剪贴板。所
我正在尝试使用已在浏览器中运行的 Clipboard API，但 PhpStorm 不知道它。 怎样才能让 PhpStorm 识别它？我已在项目设置中将 JavaScript 语言版本设置为 ECMA
Wayland 中有剪贴板 API 之类的东西吗？或者我应该在哪里以编程方式将内容粘贴到剪贴板？ 我在 Wayland 上运行 Fedora 24。 如果我觉得有一个剪贴板完全没问题，那么有代码示例(
我最近看到一个针对 ClearCase 的绝妙 hack，其中版本号作为提交的一部分被添加到 Windows 剪贴板。黑客看起来像这样: @rem = ' PERL for Windows NT -
为什么 System.Windows.Clipboard(PresentationCore.dll) 对System.Windows.Thickness (PresentationFramework.
我想用来自 NUnit 测试的文本填充 Forms.Clipboard。 我遇到的第一个问题是剪贴板必须在STA模式下使用。我找到了 the solution (NUnit 2.5.x+) 在方法上设
当我想在我的应用程序中共享基本纯文本时，将其复制到剪贴板的选项不会显示在选择器列表中。我的代码有问题吗？还是我的设备设置有误？ String code = getXMLCode(); Intent s
我在LibGDX开发游戏，游戏中有登录界面和注册界面。 HTML 版本的游戏有剪贴板的沙盒环境，意味着: 任何从游戏中复制的东西，都不能粘贴到游戏外&从外部复制的任何内容都不能粘贴到游戏的文本字段中
我有一个奇怪的问题，我相信我可能只需要一些权利来声明使其工作。 我有一些用户可以复制文本的 TextView ，并且可以将其粘贴到应用程序内的另一个文本字段中。但是当用户退出(或暂停)应用程序时，用户
我有一个小程序正在监听图像的剪贴板( Hook )。如果有存储或通过ctrl+c等复制的图像，我的程序会自动将图像粘贴到打开的word文档中。 代码: if (Clipboard.ContainsIm
我正在使用在 Linux Mint 上运行的终端仿真器(准确地说是 MATE)，它在 Windows 托管的虚拟机中运行。我通过 ssh 连接到 CentOS Linux 上的 bash shell。
我发现自己在运行脚本并将这些运行的输出复制粘贴到电子邮件或其他一些文档中。有没有办法让复制到剪贴板的步骤成为脚本本身的一部分？我的大部分脚本都是 Perl 或 bat 文件，我在 Windows 上工
如何使用 .NET 框架访问剪贴板内容？ 最佳答案 检查 Clipboard类及其 SetText\GetText 方法。 另请参阅本教程: Clipboard Copy and Paste with
我有一些代码要复制和粘贴: void WinClipboard::copy( const std::string& input ) { LPWSTR lptstrCopy;
我想获取当前存储在 Windows 剪贴板中的数据并将其保存在一个变量中，然后将数据放回剪贴板。 现在我正在使用这段代码: object l_oClipBrdData = Clipboard.GetD
引用topic这解释了如何将数据复制到 android 剪贴板，是否可以将视频/音频文件复制到剪贴板。 我假设视频/音频文件以二进制值存储并再次绑定(bind)以将它们作为视频/音频播放。 需要您的建
我是一名优秀的程序员,十分优秀！