Fatal编程技术网
  • javascript/
  • Javascript IE复制弹出窗口中的画布DOM异常：类型\u不匹配\u错误（17）

Javascript IE复制弹出窗口中的画布DOM异常：类型\u不匹配\u错误（17）

javascript html internet-explorer canvas

Javascript IE复制弹出窗口中的画布DOM异常：类型\u不匹配\u错误（17）,javascript,html,internet-explorer,canvas,Javascript,Html,Internet Explorer,Canvas,我不知道我遇到的这个IE9问题是否有解决办法，但以下是我要做的。我在我的页面的画布上有一个图像。我想将此画布图像复制到另一个画布，但在弹出窗口中创建。我在这个实验中遇到的是，我可以将画布图像复制到同一页面上另一个动态创建的画布中，没有问题。但当我尝试在弹出窗口中执行此操作时，IE会给我一个DOM异常：键入\u MISMATCH\u ERR（17）。可悲的是，这似乎是一个IE的东西，因为我在Chrome上运行了相同的代码，它工作了。。。 这是我的代码。不过，您需要提供自己的图像，我使用了一个简单的

我不知道我遇到的这个IE9问题是否有解决办法，但以下是我要做的。我在我的页面的画布上有一个图像。我想将此画布图像复制到另一个画布，但在弹出窗口中创建。我在这个实验中遇到的是，我可以将画布图像复制到同一页面上另一个动态创建的画布中，没有问题。但当我尝试在弹出窗口中执行此操作时，IE会给我一个DOM异常：键入\u MISMATCH\u ERR（17）。可悲的是，这似乎是一个IE的东西，因为我在Chrome上运行了相同的代码，它工作了。。。 这是我的代码。不过，您需要提供自己的图像，我使用了一个简单的640x480 jpeg文件。您还需要打开控制台，因为我正在执行console.error。我还尝试将此代码作为文件并在本地IIS上从localhost运行

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


画布复制测试
#mainSrc{
边框：1px纯红；
}
#dest01{
宽度：640px；
高度：480px；
边框：1px纯蓝色；
}
var destWin；//目标窗口
window.onload=function（）
{           
var testImg=新图像（）；
testImg.src=“me.jpg”；
testImg.onload=函数（）
{
var maincavas=document.getElementById（“mainSrc”）；
var mainCtx=maincavas.getContext（“2d”）；
mainCtx.drawImage（testImg，0,0）；
}
var copyBtn=document.getElementById（“copyBtn”）；
var copyWinBtn=document.getElementById（“copy2WinBtn”）；
copyBtn.addEventListener（“单击”，copyImage，false）；
copyWinBtn.addEventListener（“单击”，copy2Win，false）；
}
//将画布图像复制到同一页面上的另一个画布图像。
函数copyImage（）
{
var maincavas=document.getElementById（“mainSrc”）；
var destCanvas=document.createElement（“画布”）；
var destDiv=document.getElementById（“dest01”）；
destCanvas.width=mainCanvas.width；
destCanvas.height=mainCanvas.height；
var dCtx=destCanvas.getContext（“2d”）；
drawImage（主画布，0,0）；
destDiv.appendChild（destCanvas）；
}
//将画布复制到弹出窗口
函数copy2Win（）
{
var maincavas=document.getElementById（“mainSrc”）；
试试{
destWin=window.open（“，“destWin”）；
var destWinDoc=destWin.document；
var destWinHTML=“弹出”；
destWinDoc.write（destWinHTML）；
var destCanvas=destWinDoc.createElement（“画布”）；
var destDiv=destWinDoc.getElementById（“destWinDiv”）；
destCanvas.width=mainCanvas.width；
destCanvas.height=mainCanvas.height；
var dCtx=destCanvas.getContext（“2d”）；
drawImage（主画布，0,0）；
destDiv.appendChild（destCanvas）；
}
捕捉（错误）
{
控制台错误（err）；
}
}
好吧，在玩了一点之后，我发现标记实际上可以从画布中获取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);          
    }

函数copy2Win（）
{
var maincavas=document.getElementById（“mainSrc”）；
destWin=window.open（“，“destWin”）；
var destWinDoc=destWin.document；
var destWinHTML=“弹出”；
destWinDoc.write（destWinHTML）；
}
需要注意的是，我正在将img标记的src写入canvas.toDataURL（），这是有效的。我对此没有抱怨。虽然数据没有进入另一个画布，但我能够得到我需要的，即从画布中提取并显示在新窗口中的图像数据。有趣的是，如果您查看生成的源代码，图像实际上在src中显示为base64编码数据，因此浏览器似乎正在解码src数据以供显示；有趣

在写入之前，您是否尝试过调用
destWinDoc.open（）
？@jbabey不确定您的意思。我尝试在copy2Win函数中的dCtx.drawImage之前放置destWinDoc.open，但我的权限被拒绝。。。