我正在尝试根据 div 的内容生成图像。不幸的是它不适合我。我想这样做的原因是因为我想将生成的图像作为 base64 字符串发送到打印机。
无论如何,下面是我的代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='300' height='250'>" +
"<foreignObject width='100%' height='100%'>" +
document.getElementById('receipt_wrapper').innerHTML +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
img.onload = function () { ctx.drawImage(img, 0, 0); };
var dataURL = canvas.toDataURL("image/png");
var imgBase64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
if (window.Android != undefined) {
Android.print(image);
}
Canvas 上没有显示任何内容。我的代码有什么问题?
P.S:我在 Android 设备中运行这段代码。
最佳答案
该方法不再适用于现代浏览器。
由于现代浏览器实现的跨域安全性,不再允许使用 svg 的 foreignObject
来捕获网页内容。
如果您的收据是简单的 html 并且不包含跨域图像,您可以查看 html2canvas 以在客户端捕获内容:
http://html2canvas.hertzen.com/
或者,如果您想在服务器上捕获网页内容,您也可以使用像 phantomJS 这样的“ headless 浏览器”:
关于javascript - 使用 Canvas 打印 div 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25145157/