Image 打印多页HTML5画布元素_Image_Html5 Canvas_Printing Web Page_Multipage

Image 打印多页HTML5画布元素

image html5-canvas

Image 打印多页HTML5画布元素,image,html5-canvas,printing-web-page,multipage,Image,Html5 Canvas,Printing Web Page,Multipage,这是我在这里问过的第一个问题，因为通常我都能找到解决我所有问题的答案。然而，这周我遇到了麻烦我在我的页面上使用了一个画布，它工作得很好，可以保存为一个图像文件。我还创建了一个按钮，在使用toDataURL后，它将在新窗口中打开画布进行打印。我正在使用下面的代码： function printable() { var dataUrl = document.getElementById("mainCanvas").toDataURL("image/png"); var window

这是我在这里问过的第一个问题，因为通常我都能找到解决我所有问题的答案。然而，这周我遇到了麻烦

我在我的页面上使用了一个画布，它工作得很好，可以保存为一个图像文件。我还创建了一个按钮，在使用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();
}

这很好，打开打印对话框来打印我的画布图像。我的问题是，我的图像比一个页面大，只打印图像的第一页。是否有任何方法可以跨多个页面打印画布，或者我是否应该将这归因于浏览器到打印机功能不好，让需要打印的用户在本地保存画布后使用其他程序

谢谢

有一个愚蠢的解决方案，但肯定有效

使用脚本拆分画布，并将内容放置到多个单独的画布中

使用以下功能：

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 );