2

私はこの関数を定義しました：

function viewCanvasImg() {
    //("stage" is a kineticjs stage class object)
    stage.toDataURL({ 
        callback: function(dataUrl) {
            document.getElementById('prova').src=dataUrl;
            window.open(dataUrl);
        }
    });
}

しかし、ボタンで呼び出すと機能しません。形状と描画ではすべて正常に機能しますが、キャンバス上の画像では機能しません。

解決済みコードがローカル マシンでのみ機能しないことに気付き、Web サーバーに配置すると、すべて正常に動作します。

4

2 に答える 2

0

チュートリアルをチェックして、そこで機能しているかどうかを確認してください。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/

あなたのコードは適切に見えます。うまくいかない場合は、window.open が呼び出される前に Javascript エラーが発生している可能性があります。コンソールをチェックして、console.logあなたの友達です。

また、何が起こっているのかはstage、関数で定義されていません。そのため、関数を介してステージ オブジェクトを渡す必要がある場合がありviewCanvasImgます。

アップデート

画像を使用toDataURLすると、Same Origin Policyに注意する必要があります。

詳細については、こちらをお読みください: canvas.toDataURL() がセキュリティ例外をスローするのはなぜですか?

http://en.wikipedia.org/wiki/Same-origin_policy

これは、KineticJS がコンソールにスローするエラーです。

キネティック警告: データ URL を取得できません。ユーザー エージェントのセキュリティ ポリシーを突破しようとしました。

于 2013-09-12T22:45:00.920 に答える
0

新しいウィンドウでデータ画像の URL を開くときに同様の問題が発生します。ローカルでは表示されません。

Chrome で右クリック > [要素を検査] を試してください。

于 2014-07-17T15:13:28.933 に答える