javascript - toDataUrl - 在 IE 中保存图像？

Question

我花了很多时间使用 KineticJS 构建一个装扮游戏，但我似乎已经走到了最后的障碍。

我创建了一个“快照”按钮，我想让我的用户将 Canvas 打印到窗口或选项卡。这是我的代码片段:

Camera.prototype.takeSnapshot = function()
{

    var backgroundLayer = this.controller.view.getBackgroundLayer();
    var backgroundContext = backgroundLayer.getContext();

    var manikinLayer = this.controller.view.getManikinLayer();
    var manikinCanvas = manikinLayer.getCanvas();

    //combine background and 'manikin' layers
    backgroundContext.drawImage(manikinCanvas,0 ,0);

    //open data URL in new window
    var manikinImageUrl = backgroundLayer.getCanvas().toDataURL('image/png');
    window.open(manikinImageUrl);
};

现在我相信您已经猜到了，这适用于 FF、Chrome、Safari for Win，但不适用于 IE 或 IOS Safari。做了一些研究后，我相信所有版本如果 IE 完全不支持此功能？

我只是想找一个专家来确认这是不是真的。

还有人可以告诉我如何在打印出来之前将 backgroundLayer 和 ManikinLayer 融合在一起吗？我在代码的第 5 行收到错误消息“值无法转换为以下任何一项:HTMLImageElement、HTMLCanvasElement、HTMLVideoElement”。

任何帮助都非常感谢，因为在付出了如此多的努力之后，我几乎要放弃这个项目了!

Answer 1

在您的新窗口中，创建一个将源设置为您的数据 URL 的图像元素:

    var win=window.open();
    win.document.write("<img src='"+manikinImageUrl+"'/>");