3

キャンバス アプリケーションに fabric.js を使用しています。キャンバスに画像がある場合を除き、toDataURL メソッドは正しく機能します。キャンバスに画像を追加して toDataURL を呼び出すと、空白のページが表示されます。

//When i call it from chrome console
canvas.toDataURL();
//It returns a working data url with no problem.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg=="

//When i execute same code in a .js file it returns a data url which shows a blank image.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC"

同じコードでも .js ファイルでは動作しないのに、chrome dev console では動作するのは興味深いことです。作業データの URL が '==' で終わっていることに気付きましたが、他の URL はそうではありません。しかし、これが何を意味するのかわかりません。

4

3 に答える 3

5

問題は解決された。私が見逃した点は、キャンバスが読み込まれる前に toDataURL 関数を呼び出していたため、空白のページが表示されていたことです。

canvas.loadFromJSON(json,function(){
          var dataURL = canvas.toDataURL();
          });

loadFromJSON 関数へのコールバックとして toDataURL() 関数を指定したとき、これで問題が解決しました。

しかし、しばらくして、s3バケットから画像をアップロードしようとしたときにCORSに関する別の問題が発生し、この問題を上向きの解決策として解決しました。

于 2013-10-16T10:01:13.713 に答える