問題タブ [todataurl]

drawImage() 関数を使用しない限り、キャンバスを png ファイルとしてダウンロードできます。toDataURL() は、セキュリティ上の問題から外部画像を許可していないことを知っています。しかし、同じサーバーでホストされているローカル イメージを使用しても、まだ機能しません。残念ながら、私が見つけた解決策はどれもうまくいきませんでした。

私の問題は、KineticJS のバージョン 5 で始まりましたが、それ以前は問題ではありませんでした。正方形や円などのネイティブの KineticJS 形状は、stage.toDataURL 関数を使用して画像ファイルに保存できます。ただし、beginPath() などの通常のキャンバス メソッドで描画された非キネティック シェイプでは機能しません。および canvas.fill(); (バージョン 4 はこれで問題ありませんでした)。次のコードは、赤と青の 2 つの四角形を描画します。赤はカスタム、青はネイティブのキネティック レクタングルです。

両方の形状が表示されますが、toDataURL 関数によって生成された画像には青い四角形のみが表示されます。描画方法が KineticJS 5 で変更され、fillStyle などの属性を設定するようになったので、それが関係しているのではないかと考えています。ステージ...

Chart.jsで 2 つ以上のリンクされた Canvas-Charts を処理するには? このスクリプトを使用すると、キャンバス イメージがより大きなバージョンにリンクされて、大きなファイルがファンシー ボックスに表示されるか、2 つだけダウンロードされます (右クリック -> 保存)。簡単。

Chart.jsでtoDataURL()を使用するには少し注意が必要です。これは、アニメーションが終了する前ではなくチャート全体をレンダリングするためです。URL を要求するのが早すぎると、空の (透明な) 画像が表示されます。そのため、オプションにonAnimationCompleteが必要です。

スクリプトの後半で、アニメーションが終了すると、新しい HREF が起動/変更されます。

それはうまくいきます。ただし、canvas-imageは1 つだけです。2 番目の関数 done()を削除すると、1 番目のキャンバスで機能します。1 番目の関数を削除すると、2 番目のキャンバスだけが URL を表示します。

問題は「完了」にあると思います。それは名前ではなく、状況のようなものですか? 「var options」はすべてのキャンバス画像に一般的です（確かに、options1とoptions2、および「Line（lineChartData1、options1）」にも変更できますが、変更はありません）...「done」はすべての関数を起動しますそして - それは悪い - どうやら最後の機能だけです。

反対側では、onAnimationCompleteのエントリの名前を変更できません。それはnullまたは完了であり、他には何もありません。何をすべきか？

写真、テキスト、地図をキャンバスにロードできる Fabric.js プロトタイプがあります。完成したら、キャンバスを画像として保存できるようにしてほしいです。私は標準を使用してみました：

しかし、キャンバスはtainted-画像のせいだと思います（上記の方法は、テキストだけの場合に機能します）。エラーは次のとおりです。

Fabric の組み込みメソッドを使用して、SVG として保存できます。

しかし、私はむしろPNG / JPGが欲しいです。何か案は？

キャンバスのシリアル化に関する Fabric.js のドキュメントを次に示します。

http://fabricjs.com/fabric-intro-part-3/#serialization

キャンバスから画像を作成したいのですが、kineticjs を使用していますが、次のエラーが表示されます。クロスオリジンエラーが原因だと思います。キャンバスでは、ローカルに保存された画像を使用し、アドレス パスは「file://..」で始まります。Apacheをインストールせずにイメージを作成する方法はありますか? ありがとう。

この関数が変数 dataURL_ に対して null を返す理由を誰でも説明できますか