0

私が遭遇したこのIE9の問題の回避策があるかどうかはわかりませんが、これが私がやろうとしていることです。ページのキャンバスに画像があります。このキャンバス画像を別のキャンバスにコピーしたいのですが、ポップアップウィンドウで作成します。この実験で私が遭遇しているのは、キャンバス画像を同じページ上に動的に作成された別のキャンバスにコピーできることです。問題はありません。しかし、ポップアップウィンドウでこれを実行しようとすると、IEでDOM例外が発生します：TYPE_MISMATCH_ERR（17）。悲しいことに、これはIEのことのようです。なぜなら、同じコードをChromeで実行し、それが機能したからです...これが私のコードです。ただし、独自の画像を提供する必要があります。私は単純な640x480jpegファイルを使用しました。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

さて、もう少し遊んだ後、タグが実際にキャンバスからbase64でエンコードされた画像を取り込んでDataURL（）に表示できることがわかりました...したがって、上記の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 に答える