0

好吧，上面是满口的。所以我正在抓取一个画布并使用 toDataURL() 将其转换为数据 URI。目标是创建一个打印对话框来打印该图像。我遇到了将创建的图像推送到新窗口并在其上调用 print 的问题。见下文：

var image = new Image();
var canvas = event.context.canvas;
var data = canvas.toDataURL();
image.src = data;
var printWindow = window.open('', 'to_print', 'height=600,width=800');
var html = '<html><head><title></title></head><body style="width: 100%; padding: 0; margin: 0;" onload="window.focus(); window.print(); window.close()">' + image + '</body></html>';
printWindow.document.write(html);
printWindow.document.close();

作为打印某些东西的一种解决方法，尤其是 lodash 模板，这是可行的。它不漂亮，但它有效。

无论如何，当我运行它时，我会回来：

[object HTMLImageElement]

我不知道为什么它给了我而不是显示图像。有没有人有尝试打印由 toDataURL() 方法构建的图像的经验？

4

1 回答 1

3

您不能将图像对象连接成 HTML 字符串，或者说可以，但这会为您提供该对象的字符串表示形式，即[object HTMLImageElement].

您必须改为<img>在 HTML 中创建标签

var x=window.open(); x.document.open(); x.document.write('内容'); x.document.close();

var canvas = event.context.canvas;
var data = canvas.toDataURL();

var html  = '<html><head><title></title></head>';
    html += '<body style="width: 100%; padding: 0; margin: 0;"';
    html += ' onload="window.focus(); window.print(); window.close()">';
    html += '<img src="' + data + '" /></body></html>';

var printWindow = window.open('', 'to_print', 'height=600,width=800');

printWindow.document.open();
printWindow.document.write(html);
printWindow.document.close();
printWindow.close();
于 2016-01-08T20:16:09.757 回答