1

次のコードは IE では正常に動作しますが、Chrome では動作しません (バージョン 31.0.1650.63 m)。
エラー メッセージ: 'HTMLCanvasElement' で 'toDataURL' を実行できませんでした: 汚染されたキャンバスはエクスポートされない可能性があります。

<html>
<body>
<img id="source" src="C:\test.jpg" /></br>
<input type="button" value="convert" onclick="onClick()" /></br>
<img id="output" />

<script>
    onClick = function () {
        var source = document.getElementById("source");
        var canvas = document.createElement("canvas");
        canvas.width = source.width;
        canvas.height = source.width;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(source, 0, 0);
        var output = document.getElementById("output");
        output.src = canvas.toDataURL("image/png");
    };
</script>

</body>
</html>

ここで同様の質問をたくさん見ましたが、答えが見つかりませんでした。どんな助けでも大歓迎です。

4

1 に答える 1

1

MDNから:

キャンバスで CORS 承認なしで画像を使用することはできますが、そうするとキャンバスが汚染されます。キャンバスが汚染されると、キャンバスからデータを引き出すことはできなくなります。

したがって、キャンバスに描画している画像は別のドメインからのものであるため、キャンバスを使用してデータをエクスポートすることは許可されていません。詳細については、MDN の記事を参照してください。

于 2013-12-23T12:12:13.267 に答える