3

私はこれをします：

$('#displayBtn').click(function(){
    var canvas = document.getElementById("myCanvas");
    var dataUrl = canvas.toDataURL();
    document.getElementById("textArea").value = dataUrl;
});

FirefoxとIEでうまく機能しますが、Chromeではうまくいきません。グーグルで.SVGファイルに関連する問題が発生しましたが、SVGファイルを使用しておらず、PNGとJPGのみを使用しています。これが私のコードのフィドルです：http：//jsfiddle.net/ykpCn/2/ 透明なPNGを使用しているからですか？何が間違っているのかわからない。HTML5は非常に新しいので、私が見落としていたのは愚かなことではないことを願っています。

4

2 に答える 2

3

どうやらそれはウェブサーバーでホストされている場合にのみChromeで機能しますか？サーバーにアップロードしてそこから表示すると正常に動作しますが、ローカルでは動作しません。私の質問は今愚かです。時間を無駄にしてすみません。

于 2013-01-22T11:00:12.687 に答える
3

この問題は、クロスオリジンリソースアクセスに関連しています。キャンバスにレンダリングした画像は、別のオリジン（http://moosepi.com）からのものです。異なるオリジンからの画像に対してtoDataURL（）を呼び出すことはできません。

Chromeデベロッパーツールを起動すると、コンソールにこれが表示されます。「キャッチされないエラー：SECURITY_ERR：DOM例外18」。これは、仕様に従って予想される動作です。

解決策：1。サーバーからイメージをホストします（プロキシ設定を使用している可能性があります）。2.リソースにCORS属性を設定します。ソースは適切なヘッダーを設定する必要があることに注意してください。

于 2013-01-22T13:12:51.933 に答える