0

我不知道我遇到的这个 IE9 问题是否有解决方法，但这就是我想要做的。我的页面上的画布中有一张图片。我想将此画布图像复制到另一个画布，但在我创建的弹出窗口中。我在这个实验中遇到的是我可以将画布图像复制到同一页面上另一个动态创建的画布中，没问题。但是当我尝试在弹出窗口中执行此操作时，IE 给了我一个DOM Exception: TYPE_MISMATCH_ERR (17)。可悲的是，这似乎是 IE 的事情，因为我在 Chrome 中运行了相同的代码，并且它有效......所以这是我的代码。不过，您需要提供自己的图像，我使用了一个简单的 640x480 jpeg 文件。您还需要打开控制台，因为我正在执行 console.error。

<!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>
4

1 回答 1

0

好吧，在玩了一会儿之后，我发现标签实际上可以从画布 toDataURL() 中获取 base64 编码的图像并显示它......所以我能够在上面的 copy2Win 函数中进行这个修改这个：

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

需要注意的是，我正在将 img 标记的 src 写为 canvas.toDataURL()，这很有效。IE 不会抱怨这一点。虽然数据没有进入另一个画布，但我能够得到我需要的东西，这是我从画布中提取并显示在新窗口中的图像数据。有趣的是，如果您查看生成的源代码，图像实际上显示为 src 中的 base64 编码数据，因此浏览器似乎正在解码 src 数据以进行显示；有趣的。

于 2012-10-16T14:55:42.313 回答