將 SVG 作為圖像復制到剪貼板
[英]Copy SVG to clipboard as image
問題描述
我正在開發一個應用程序，我想為 svg 提供一個復制按鈕，以便將其作為圖像復制到剪貼板，該剪貼板可以粘貼到其他地方。
我嘗試使用剪貼板 API，但它有很多安全限制，而且它似乎不適用於 http 並且僅適用於 png。
我還通過使用圖像創建一個 div 來嘗試document.execCommand('copy') ，但它僅在 MS Word 中對我有用，但不適用於松弛或堆棧溢出（不知道為什么）。
我想通過 Javascript 復制 chrome/firefox 的右鍵單擊上下文菜單的復制圖像選項的行為。
有什么辦法可以做到嗎？ 我對所有想法持開放態度。 謝謝！
2 個解決方案
解決方案1
0 2020-09-30 09:37:43
只是一些提示，而不是實際的答案。 我使用評論中的信息設置了一個本地示例：
<!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 中得到一個大小合適的黑色圖片。 我認為這意味着畫布仍未繪制。 由於延遲，畫布顯示圖片，但我收到一條錯誤消息，說它無法使用toBlob進行轉換，因為它已被污染。 這是解釋here 。 如果您可以在服務器中設置 CORS 策略，則可以避免這種污染。 我仍然不確定解決方案的可移植性。
解決方案2
0 2021-05-20 22:52:15
您可以簡單地將 ',' 字符后面的Base64 代碼復制到結尾（ PHN2ZyB4bWxu...4= ）並使用任何服務（如base64.guru ）將其轉換為 SVG，然后將結果作為圖像復制到剪貼板。
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIiB3aWR0aD0iNDQ4IiBoZWlnaHQ9IjUxMiI+PHBhdGggZmlsbD0iIzNhNWI4NyIgZD0iTTAgNDY0YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDM1MmMyNi41IDAgNDgtMjEuNSA0OC00OFYxOTJIMHYyNzJ6bTMyMC0xOTZjMC02LjYgNS40LTEyIDEyLTEyaDQwYzYuNiAwIDEyIDUuNCAxMiAxMnY0MGMwIDYuNi01LjQgMTItMTIgMTJoLTQwYy02LjYgMC0xMi01LjQtMTItMTJ2LTQwem0wIDEyOGMwLTYuNiA1LjQtMTIgMTItMTJoNDBjNi42IDAgMTIgNS40IDEyIDEydjQwYzAgNi42LTUuNCAxMi0xMiAxMmgtNDBjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNDB6TTE5MiAyNjhjMC02LjYgNS40LTEyIDEyLTEyaDQwYzYuNiAwIDEyIDUuNCAxMiAxMnY0MGMwIDYuNi01LjQgMTItMTIgMTJoLTQwYy02LjYgMC0xMi01LjQtMTItMTJ2LTQwem0wIDEyOGMwLTYuNiA1LjQtMTIgMTItMTJoNDBjNi42IDAgMTIgNS40IDEyIDEydjQwYzAgNi42LTUuNCAxMi0xMiAxMmgtNDBjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNDB6TTY0IDI2OGMwLTYuNiA1LjQtMTIgMTItMTJoNDBjNi42IDAgMTIgNS40IDEyIDEydjQwYzAgNi42LTUuNCAxMi0xMiAxMkg3NmMtNi42IDAtMTItNS40LTEyLTEydi00MHptMCAxMjhjMC02LjYgNS40LTEyIDEyLTEyaDQwYzYuNiAwIDEyIDUuNCAxMiAxMnY0MGMwIDYuNi01LjQgMTItMTIgMTJINzZjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNDB6TTQwMCA2NGgtNDhWMTZjMC04LjgtNy4yLTE2LTE2LTE2aC0zMmMtOC44IDAtMTYgNy4yLTE2IDE2djQ4SDE2MFYxNmMwLTguOC03LjItMTYtMTYtMTZoLTMyYy04LjggMC0xNiA3LjItMTYgMTZ2NDhINDhDMjEuNSA2NCAwIDg1LjUgMCAxMTJ2NDhoNDQ4di00OGMwLTI2LjUtMjEuNS00OC00OC00OHoiPjwvcGF0aD48L3N2Zz4=
在瀏覽器中渲染 SVG 圖像：將元素名稱復制到剪貼板
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.