問題タブ [todataurl]

のドキュメントは次のとおりですtoDataURL。

If this argument is anything else, the default value for image quality is used. Other arguments are ignored.. 画質のデフォルト値は?

私はJSクロッパーライブラリを使用しています。トリミングが完了すると、クロッパーがキャンバスを提供してくれるので、データを取得してトリミングした画像をサーバーにアップロードできます。

現在は正常に動作しますが、キャンバスを PNG データの URL に変換するとき、出力画像を非常に大きくしたいので (バナーです)、アップロードに実際には多くの時間がかかるため、圧縮されているように見える JPEG を使用することを好みます。より良い大きな写真。ただし、JPEG にはアルファ チャネルがないため、背景に置き換える必要があるようです (色: 白を選択します)。

元の画像が次のような場合に、そのキャンバスを JPEG のデータ URL に変換する方法を教えてください。

PNGで警告アイコンを切り抜いた画像です。背景はアルファで、いくつかの黒い描画があります。

私はいくつかの試みをしましたが、キャンバスに長方形を描くと、最初の絵の上に描かれるようです。クロッパー ライブラリが既に構築されたキャンバスを提供するため、画像が追加される前に四角形を描画できません。

これを行うと、最後に白い画像しか得られません。

四角形を描画せずに JPEG に変換しようとすると、黒い画像が表示されます。

私の生地のキャンバスには、背景としての画像と、キャンバス内の URL からの別の画像があります。

次に、このキャンバスを Facebook で共有する画像にする必要があります。

ボタンをクリックして fabricJS の toDataUrl() 関数を試してみましたが、空白の画像が表示されます。

Chrome でキャンバスを右クリックしたときに表示される画像として保存する機能でも、空白の画像が表示されます。

JSONとSVGにシリアル化しようとしましたが、空白のキャンバスも表示されます。また、画像データをajax経由でサーバーにアップロードし、サーバーに画像として保存してみました。また、サーバー上に空の画像が表示されます。

ただし、以下に示すように FabricJS キャンバスを静的キャンバスに変更すると、すべてが機能します。クロムで画像として保存すると、画像として表示されます。

FabricJS のインタラクティブ機能が必要なため、通常のキャンバスで機能させるにはどうすればよいでしょうか。

meteor を利用したサイトからページの pdf を作成しようとしています。このページには、かなりのスタイルといくつかの d3 チャートが含まれています。私は自分の目標を達成するためにchipcastledotcom:jspdfとを追加しました。new3rs:html2canvas

私の計画は、html2canvas を jsPDF の.addImage()機能と組み合わせて使用​​して、グラフを pdf に追加することです。私の目標に向けた最初のステップとして、Web ページ (ロゴ) に既存の画像を取り、新しく作成したキャンバス要素に描画し、html2canvas 内で呼び出して、jsPDF の関数canvas.toDataURL('image/jpg')の引数として使用しようとしています。.addImage()

img最終的に、ロゴ画像は、d3 チャートを要素に変換して作成した画像に置き換えられます。私の問題は、pdf が生成されているが、画像が空白であることです。

サイトのユーザーとしてpdf生成を呼び出す前に、画像がWebページにはっきりと表示されるため、画像の負荷の問題ではないと思います。

私が取得したデータのURLは以下です。=私が戻ってきたデータURLの最後は、私にはまったくtoDataURL()正しく見えません（ただし、何を期待すべきかは本当にわかりません）：

これまたは私が理解していないことに対する修正/回避策はありtoDataURL()ますか?

これは、私が達成しようとしていることを示す jsfiddle (完全に動作します) です: https://jsfiddle.net/jdcast/tqfdkusp/。

同様/同じ問題に関するこの以前の SO の質問に出くわしましたが、解決策がないように見えたことに注意してください。

ありがとう！

さて、上記は一口です。そこで、キャンバスを取得し、toDataURL() を使用してデータ URI に変換しています。目標は、その画像を印刷するための印刷ダイアログを作成することです。作成した画像を新しいウィンドウにプッシュして印刷を呼び出すという問題が発生しています。下記参照：

何か、特にlodashテンプレートを印刷するための回避策として、これは機能します。きれいではありませんが、機能します。

とにかく、これを実行すると、次のように返されます。

画像を表示する代わりに、なぜそれが私に与えられているのかわかりません。toDataURL() メソッドから構築された画像を印刷しようとした経験のある人はいますか?

バックグラウンド設定

他の一連の画像から画像を作成する Web アプリケーションがあります。私が選択した方法は、一連の画像を読み込んで HTML キャンバスに配置することです。次に、各キャンバスを jpeg としてサードパーティ API にエクスポートし、それを使用toDataURLして Blob に変換します。私が直面している問題は、これらのキャンバスの多くがすべてデータを jpg としてエクスポートしていて、多くのリソースを消費していることです。各キャンバスが を呼び出そうとすると、アプリケーションの速度が低下し、応答しなくなりますtoDataURL。

質問

特にキャンバスのサイズが大きい場合、キャンバスのtoDataUrl()orを呼び出すと非常に遅くなることがわかりました。toBlob()Web ワーカーのマルチスレッドの性質を利用したいと考えています。

まず、canvas オブジェクトを渡そうとしましたが、エラーがスローされました。オブジェクトが問題であることが判明し、文字列に変換されるか、複製できない場合に失敗するようです。いずれにせよ、コンテキストの画像データを渡すとうまくいくことがわかりました。Uint8ClampedArrayデータは、キャンバス コンテキストの method から生の RGB 値の形式で渡されますgetImageData()。

Main.js

myWorker.js

Uint8ClampedArrayRGB情報を保持するaをjpg/pngデータに変換する方法を知ることになると思います。

これが便利だと思う理由はgetImageData、キャンバス コンテキストから既存のデータ構造をコピーするだけなので、toDataUrl. 以下のコード ブロックに似たものを呼び出しながら、CPU プロファイルをキャプチャしました。

そして得た：

そのため、プロセスの負荷を Web ワーカーにオフロードしたいと思います。別のプロセスで発生している限り、Web ワーカー内で時間がかかってもかまいません。

それについてのいくつかの追加の考え：

• 変換を行うために追加のライブラリを追加することは問題ありませんが、Web ワーカー ファイルへの依存関係として外部ライブラリを追加する方法を提供するためのボーナス ポイントです。現在、アプリケーションに browserify を使用しています。おそらく、Web ワーカー用に別のブラウザ化されたバンドルを作成しますか?
• 最後に（サードパーティのAPI用に）jpegが必要なので、pngに変換するのは、jpegへの変換のステップになるだけです。
• encoderOptionsプロセスを高速化する方法として、 の 2 番目のオプションである を下げてtoDataURLみましたが、あまり変化が見られませんでした。