使用 javaScript 打印 toDataURL 图像

Question

嗯，以上是一口。所以我抓取一个 canvas 并使用 toDataURL() 将其转换为数据 URI。目标是创建一个打印对话框来打印该图像。我运行正在解决将创建的图像推送到新 window 并在其上调用打印的问题。见下文：

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('content'); 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 图像

Printing a toDataURL image using javaScript

javascript

todataurl