javascript - 如何使用 javascript 打印 Canvas 内容

Question

我正在使用 canvas 使用 jsp 页面进行书写。我可以在 Canvas 上写下任何信息， (我创建的 Canvas 消息..) 但在此之后，当我想使用 javascript 打印代码 打印此 Canvas 消息时，我无法打印 Canvas 内容。下面你可以看到打印预览..

我想打印我在 Canvas 上创建的 Canvas 消息。 请帮助我解决这个问题，任何帮助将不胜感激..

Answer 1

当对话框显示时，您的 Canvas 可能会被清除 - 这通常发生在 Chrome 浏览器中。

由于您没有发布任何源代码，因此没有源代码可供尝试，我将给出一个您可以尝试的理论答案 - 我会建议两种可能的解决方案:

1. 添加用于调整大小的事件处理程序。触发时重绘内容(这意味着您需要存储您绘制的点等或制作离屏 Canvas 来存储副本)。我经历过，当对话框清除 Canvas 时，此事件会触发(在 Chrome 中) - 如果它适用于打印预览，我不确定 - 如果不尝试下一点:

2. 当您单击打印按钮时，将 Canvas 提取为图像，并将 Canvas 元素替换(临时)为图像元素，将源设置为 Canvas 中的 data-uri。在图像的 onload 处理程序上触发打印代码:

第二点示例:

/// create a reference to canvas element
var canvas = document.getElementById('myCanvas');

printBtn.addEventListener('click' function() {

    /// remove it from DOM (use parent element if any, for demo I use body)
    document.body.removeChild(canvas);

    var img = new Image;

    img.id = 'tempPrintImage';    /// give an id so we can remove it in next step
    img.onload = print;           /// onload handler triggers your print method
    img.src = canvas.toDataURL(); /// set canvas image as source

    document.body.appendChild(img);

}, false);

function print() {

    ...your print code here. On return reverse the elements: ...

    var img = document.getElementById('tempPrintImage');
    document.body.removeChild(img);
    document.body.appendChild(canvas);
}

代码可能看起来有点重载，但这里的关键点是保留 Canvas 的内容。您可以将图像放在顶部等等。