Home/ Questions/Q 8690511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T23:55:04+00:00

I don’t know if there is a work around for this IE9 issue I

  • 0

I don’t know if there is a work around for this IE9 issue I ran into, but here’s what I’m trying to do. I have an image in a canvas on my page. I want to copy this canvas image to another canvas, but in a pop-up window I create. What I’m encountering in this experiment is I can copy the canvas image into another dynamically created canvas on the same page, no problem. But when I try to do it in a pop-up window, IE gives me a DOM Exception: TYPE_MISMATCH_ERR (17). Sadly, this seems to be an IE thing, because I ran my same code in Chrome, and it worked…
So here’s my code. You’ll need to provide your own image though, I used a simple 640×480 jpeg file. You’ll also need the console open, since I’m doing a console.error. I also tried this code as a file and running from localhost on my local IIS. 

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Copy Test</title>
    <style>
        #mainSrc {
            border:1px solid red;
        }
        #dest01 {
            width:640px;
            height:480px;
            border:1px solid blue;
        }
    </style>
    <script>
        var destWin;    // Destination Window

        window.onload=function()
        {           
            var testImg = new Image();
            testImg.src = "me.jpg";
            testImg.onload = function()
            {
                var mainCanvas = document.getElementById("mainSrc");
                var mainCtx = mainCanvas.getContext("2d");
                mainCtx.drawImage(testImg,0,0);
            }
            var copyBtn = document.getElementById("copyBtn");
            var copyWinBtn = document.getElementById("copy2WinBtn");
            copyBtn.addEventListener("click",copyImage,false);
            copyWinBtn.addEventListener("click",copy2Win,false);
        }

        // Copy Canvas Image to Another on the same page.
        function copyImage()
        {
            var mainCanvas = document.getElementById("mainSrc");
            var destCanvas = document.createElement("canvas");
            var destDiv = document.getElementById("dest01");
            destCanvas.width = mainCanvas.width;
            destCanvas.height = mainCanvas.height;
            var dCtx = destCanvas.getContext("2d");
            dCtx.drawImage(mainCanvas,0,0);
            destDiv.appendChild(destCanvas);
        }

        // Copy Canvas to Popup Window
        function copy2Win()
        {
            var mainCanvas = document.getElementById("mainSrc");

            try {           
                destWin = window.open("","destWin");
                var destWinDoc = destWin.document;
                var destWinHTML = "<!DOCTYPE html><html><head><title>POPUP</title><body><div id='destWinDiv' style='width:640px; height:480px; border:1px solid red'></div></body></html>";
                destWinDoc.write(destWinHTML);

                var destCanvas = destWinDoc.createElement("canvas");
                var destDiv = destWinDoc.getElementById("destWinDiv");
                destCanvas.width = mainCanvas.width;
                destCanvas.height = mainCanvas.height;
                var dCtx = destCanvas.getContext("2d");
                dCtx.drawImage(mainCanvas,0,0);
                destDiv.appendChild(destCanvas);
            }
            catch (err)
            {
                console.error(err);
            }
        }

    </script>
</head>
<body>
    <canvas id="mainSrc" width="640" height="480"></canvas>
    <p>
        <input type="button" name="Copy" value="Copy" id="copyBtn" />
        &nbsp;
        <input type="button" name="Copy2Win" value="Copy To New Window" id="copy2WinBtn" />
    </p>
    <div id="dest01"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, after playing around a little more, I figured out that the tag can actually take in a base64 encoded image from the canvas toDataURL() and display it… So I was able to make this modification in my above copy2Win function to be this:

        function copy2Win()
    {
        var mainCanvas = document.getElementById("mainSrc");
        destWin = window.open("","destWin");
        var destWinDoc = destWin.document;
        var destWinHTML = "<!DOCTYPE html><html><head><title>POPUP</title><body><div id='destWin' style='width:640px; height:480px; border:1px solid red'><img src='" + mainCanvas.toDataURL() + "' alt='Copy!' /></div></body></html>";
        destWinDoc.write(destWinHTML);          
    }

    The thing to note is I’m writing out the img tag’s src to be the canvas.toDataURL(), and this works. IE doesn’t complain about this. Although the data isn’t into another canvas, I’m able to get what I need, which is my image data pulled from my canvas and displayed in a new window. Interestingly, if you look at the generated source code the image is actually shown as the base64 encoded data in the src, so it seems the browser is decoding the src data for display; interesting.

    • 0