問題タブ [todataurl]

ツリーを作成する前に、canvas を使用していくつかのアイコン (プラス、マイナス、ノードなど) を描画します。次に、オブジェクトに画像を配置し、キャンバスの使用をやめました。このような：

次に、ツリーの背景画像でそれらを使用します。

ですから、リンクを使用する代わりに、オブジェクトからすべての要素に厳密にデータを配置するため、ページ上のデータ量が非常に大きくなることがわかります。ツリーには数百または数千のツリー要素が存在する可能性があるため、メモリの問題が発生すると思います。

どうにかしてオブジェクト内のデータへのリンクを使用するのが最善の方法かもしれませんが、その方法はわかりません。たぶん、新しい要素を作成しますか？この問題を解決する方法はありますか?

PS: 私は JavaScript を学んでおり、ライブラリを使用せずに基本を理解する必要があります。

こんにちは、5000px x 5000px のような大きなキャンバスと多くのペイント ツールがあります。undoラグや非常に大きな使用メモリなしで関数を解決するための最良のソリューションは何かを知る必要があります。mousedownここで、メソッドを使用してキャンバスを配列に保存するたびに作成してみますtoDataUrl。

これは良い方法だと思いますか、それともこの問題を解決するためのより良い方法を探す必要がありますか?

小さなキャンバスと 1 つのペイント ツール (鉛筆) のみの例:

http://codepen.io/anon/pen/azyPGN

Html (部分):

コードの一部を保存して復元します。

主な問題は、多くの画像を処理しなければならないことです。そして、それらすべてに crossOrigin 属性を使用することはできません。

ブラウザで特定のファイルをアップロードすると、ファイルのタイプは jpeg でファイルのサイズは 2MB ですが、ファイルを を使用して base64 にエンコードするcanvas.toDataURL()と、結果のファイルのサイズは約 9MB になります。

base64 でエンコードされたファイルが元のファイルよりも 3 ～ 4 倍大きいのはなぜですか?

のオプションを指定できることtoDataURl(type, quality)がわかりましたが、png ファイルには使用できず、jpeg だけに使用できません。png が必要です。

ここで何が起こっているのか、私は本当に唖然としています。

フロントエンド側で画像のサイズ変更/圧縮にPreprocess.jsを使用しています。ただし、image.onload の processfile() 関数 (32 行目) では、toDataURL() 文字列を Blob に変換しているため、ファイル オブジェクトとして API に送信できます。これを行うために、dataURItoBlob関数を使用しています。私はこれで終わります：

次に、eventImage のコンテンツを API に送信します。

さて、これはうまくいきます。画像のサイズ変更/圧縮が行われ、(成功の応答で) API に送信され、Web ページ内で出力画像を確認できます。

ただし、Chrome/Firefox のコンソール ([リソース] タブ) では、画像の重量が非常に大きくなっています (Chrome で 8MB、Firefox で 1.5MB)。

さらに奇妙なのは、Web ページ内に画像をロードすると、圧縮されたサイズであるかのようにロードされることです。しかし、API からの直接リンクからロードすると、ロードして表示されるまでに時間がかかります (8MB/1.5MB のデータをロードしているかのように)。

何が起きてる？すべてフロントエンド側ですか？ブラウザ、API、または MIME/Content-type に不具合はありますか?

どうもありがとう。

2 つの HTML キャンバスを 1 つのキャンバスにマージしてから、それを画像としてダウンロードしようとしています。私のコードは以下の通りです：

ここでの私の問題は、次の行のようです。

これは、一方のキャンバスのコンテンツを他方のキャンバスに描画することを想定していますが、実際にはそうしていますが、コードの後半部分が実行されて画像がダウンロードされるのを防ぎます。この特定の行を削除すると、ダウンロード機能は正常に機能しますが、残念ながらキャンバスの 1 つしかダウンロードされません。

したがって、私の質問は次のいずれかです。ここで何が間違っているのですか? または 2 つの HTML キャンバスをマージして、画像としてダウンロードするにはどうすればよいですか。

(別の注意として、ダウンロード用の上記のコードは Chrome でのみ正常に機能します。他のブラウザーでは、ファイルの名前を設定してファイル拡張子を設定することはできません。)

私はこのコードを持っています

PDFエクスポートを作成し、ジェネラルグラフで画像に追加する必要があります。ベロフェ レンダリング画像を保存しなければなりません。メソッド .toBase64Image() を使用しようとしましたが、開始できるかどうかわかりません。

私の収入

canvas_link (.toDataUrl) を作成します。画像として保存をクリックすると、画像を大きくしてサーバーにアップロードできます。次に、pdf エクスポート (mPDF 全体) を生成し、imageto をエクスポートに追加できます。これは作成できますが、グラフの画像を作成してサーバーにアップロードすることはわかりません。

http://www.chartjs.org/docs/からさらに例が必要です

キャンバスの toDataUrl() メソッドへの一連の呼び出しから作成された Image 配列。次に、SpriteSheet を作成する必要があります。

それ、どうやったら出来るの？

ここで SpriteSheet の EaselJS ドキュメントを読みました。しかし、実行時にそれを作成する方法や例はありません。

複雑な WebGL を利用したアプリケーションを開発し、現在のシーンのスクリーンショットを保存する機能をユーザーに提供します。この機能は Chrome と Firefox では期待どおりに動作しますが、Safari ではいくつかの問題に直面しています。

次のコードを見てください。ご覧のとおり、CanvasElement の toDataURL() メソッドを使用してスクリーンショットを作成します。このコードは他のブラウザーでは期待どおりに機能しますが、Safari では間違った画像を生成します (少なくとも WebGL キャンバスの場合)。

このファイルを開くか、添付のコード スニペットを safari や他のブラウザで実行することで、問題を簡単に再現できます。

私たちは何か間違ったことをしていますか？この問題の回避策はありますか?

ありがとうございました。

UPD:特に preserveDrawingBuffer に関連していると言う人のために、添付のコード スニペットを変更して、preserveDrawingBuffer を true に設定しても、サファリで正しく動作しないことを示しました。