Question

以上是满口的。所以我抓住画布并使用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（）方法构建的图像的经验？

Answer 1

您无法将图像对象连接到HTML字符串中，或者您可以将其连接起来，但这会为您提供该对象的字符串表示形式，即[object HTMLImageElement]。

您必须在HTML中创建<img>标记

var x = window.open（）; x.document.open（）; x.document.write（＆＃39;内容＆＃39）; 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();

使用javaScript打印toDataURL图像

1 个答案: