Question

这是我在这里问过的第一个问题，因为通常我会找到一个可以解决我所有问题的答案。然而，这个星期我已经碰壁了。

我在我的页面上使用的画布效果很好，可以保存为图像文件。我还创建了一个按钮，可以在使用toDataURL后在新窗口中打开画布进行打印。我正在使用以下代码：

function printable() {
    var dataUrl = document.getElementById("mainCanvas").toDataURL("image/png");
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<head><title>Print Map</title></head>';
    windowContent += '<body>';
    windowContent += '<img src = "' + dataUrl + '">';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('', '', width = 340, height = 260);
    printWin.document.open();
    printWin.document.write(windowContent);
    printWin.document.close();
    printWin.focus();
    printWin.print();
}

这很好用并打开打印对话框以打印我的画布图像。我的问题是我的图像比单个页面大，只打印了我图像的第一页。有没有办法在多个页面上打印我的画布，或者我应该将其归结为糟糕的浏览器到打印机功能，并让我的用户在本地保存画布后需要打印以使用其他程序？

由于

Answer 1

有一个愚蠢的解决方案，但绝对有效。

使用脚本来分割画布，并将内容放到几个单独的画布上。

使用这些功能：

ImageData getImageData(in float x, in float y, in float width, in float height);
void putImageData(in ImageData imagedata, in float dx, double dy, in float dirtyX Optional , in float dirtyY Optional , in float dirtyWidth Optional , in float dirtyHeight Optional );

打印多页HTML5画布元素

1 个答案: