toDataUrl - saving Images in IE?

Question

I have spent a lot of time building a dress-up game using KineticJS and I seem to have fallen at the final hurdle.

I have created a 'Snapshot' button which I wanted to allow my users to print the canvas to a window or tab. Here is a snippet of my code:

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);
};

Now as im sure you will have guessed already, this works in FF, Chrome, Safari for Win, but not IE or IOS Safari. Having done some research I believe all versions if IE flat out dont support this functionality?

I am just looking for an expert to confirm if this is true or not.

Also could someone please tell me how to fuse the the backgroundLayer and ManikinLayer together before they are printed out? I am getting the errpr 'Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement' on the 5th line of code.

Any help much appreciated as I am close to junking the project after having put in so much effort!

Answer 1

In your new window, create an image element with the source set to your dataURL:

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