jQuery clone（）不克隆画布的内容

我正在尝试克隆打印所需的页面。“打印”对话框应仅打印出选定图元及其图元

这会复制整个正文页，克隆我应该打印出来的打印内容，然后清空正文并用它应该打印的内容替换它。之后，它将打开仅包含可打印元素的打印对话框。解决方法是：在

.html（printcontent）

之后再次创建整个画布。由于

clone（）

仅克隆HTML，因此画布尚未初始化且没有内容

因为我使用的是Angular指令，所以我无法简单地完成整个“重画画布”。是否有一种角度的方法可以“重新渲染DOM”或类似的东西？

画布“内容”不是DOM的一部分，不能通过DOM方法复制。但是，调用

clonedCanvas.getContext（'2d'）.drawImage（originalCanvas，0,0）

非常容易，它将在克隆的画布上绘制原始画布

然后你可以试试类似的东西

//这将覆盖HTMLCanvas“cloneNode”原型
（功能（）{
var ori=htmlcanvaseelement.prototype.cloneNode；
HTMLCanvasElement.prototype.cloneNode=函数（）{
var copy=ori.apply（这是参数）；
//不要为web gl画布执行此操作
if（this.getContext（'2d'））{
copy.getContext（'2d'）.drawImage（this，0,0）；
}
返回副本；
};
})();
var original=document.querySelector（'canvas'）；
original.getContext（'2d'）.fillRect（20,20,20,20）；
对于（var i=0；icanvas“content”不是DOM的一部分，不能通过DOM方法复制。但是，调用
clonedCanvas.getContext（'2d'）.drawImage（originalCanvas，0,0）
非常容易，它将在克隆的画布上绘制原始画布

然后你可以试试类似的东西


//这将覆盖HTMLCanvas“cloneNode”原型
（功能（）{
var ori=htmlcanvaseelement.prototype.cloneNode；
HTMLCanvasElement.prototype.cloneNode=函数（）{
var copy=ori.apply（这是参数）；
//不要为web gl画布执行此操作
if（this.getContext（'2d'））{
copy.getContext（'2d'）.drawImage（this，0,0）；
}
返回副本；
};
})();
var original=document.querySelector（'canvas'）；
original.getContext（'2d'）.fillRect（20,20,20,20）；
对于（var i=0；ii如果您必须恢复到手动复制画布的过程，请参见@VanquishedWombat是的，但这是绝对的最后手段。我真的，真的不想遍历我所有的画布（可能是数百个）就在我打印页面之前。如果您必须恢复到手动复制画布的过程，请参阅@VanquishedWombat是的，但这是绝对的最后手段。我真的，真的不想重复我所有的画布（可能是数百个）就在我打印页面之前。有趣的是，我只是做了一些类似的事情。然而，不幸的是，它在FireFox中不起作用。我最终将它们全部转换为图像，将画布的HTML更改为图像，然后打印页面。因为它们只生成一次，而且从未被再次触摸过，所以我不需要将它们转换回canvas、 我也选择不替换整个主体，因为这相当慢，完全破坏了我的所有绑定。@Mortenmolder，我在Firefox上写的，它肯定能工作。我不明白为什么其他人不能这样做。此外，cloneNode+drawImage比任何导出方法消耗的内存都少。这很奇怪！我刚刚再试了一次，它就工作了s、 不过对我来说确实需要几秒钟。谢谢：）啊，还需要直接在画布元素上调用它（不幸的是，它不适用于
parentNode.cloneNode（true）
）有趣的是，我只是做了一些类似的事情。然而，不幸的是，它在FireFox中不起作用。我最终将它们全部转换为图像，将画布上的HTML更改为图像，然后打印页面。因为它们只生成一次，再也没有被触摸过，所以我不需要将它们转换回画布。我还选择了不使用repla对整个身体进行复制，因为这相当慢，完全破坏了我所有的绑定。@MortenMoulder，我在Firefox上写的，它肯定能工作。我不明白为什么对其他人不起作用。此外，cloneNode+drawImage比任何导出方法都要少消耗内存。这很奇怪！我刚刚再试了一次，它能工作。它确实需要几秒钟的时间或者是我。谢谢：）啊，还需要直接在canvas元素上调用它（不幸的是，它不适用于
parentNode.cloneNode（true）
）
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);



setTimeout(function() {
  var restorepage = $('body').html();
  var printcontent = $("#hello").clone();
  $('body').empty().html(printcontent);
  window.print();
  $('body').html(restorepage);
}, 1000);