将HTML画布转换为图像。 Javascript
问题描述:
我想导出我的HTML画布到图像。但是当我输出图像时,我不断收到img src =“undefined”。我直接将画布打印到页面上,并确认我获得了正确的画布。这是我正在使用的代码。请让我知道你看到的是错误的。可能是CORS的问题(这是HTML5)?将HTML画布转换为图像。 Javascript
scope.getShuttleImage = function() {
var tmpPng
var imageElement
html2canvas(document.body.getElementsByClassName("shuttle-truck"), {
useCORS: true,
onrendered: function (canvas) {
tmpPng = canvas.toDataURL("image/png");
}
});
document.write('<img src= "' + tmpPng+'"/>"') // Just for testings sake
};
答
我相信问题是html2canvas
是异步的。尝试将您的代码更改为以下内容。像@Archer说的那样
scope.getShuttleImage = function() {
var tmpPng
var imageElement
html2canvas(document.body.getElementsByClassName("shuttle-truck"), {
useCORS: true,
onrendered: function (canvas) {
tmpPng = canvas.toDataURL("image/png");
document.write('<img src= "' + tmpPng+'"/>"') // Just for testings sake
}
});
};
+1
谢谢!清晨的混乱 – user4493284
将'document.write()'移动到'onrendered'处理程序中。在将图像添加到页面后,该事件处理程序正在运行*。 – Archer
谢谢。这是一个非常愚蠢的错误 – user4493284
嘿 - 它发生在我们最好的:) – Archer