問題タブ [todataurl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
15582 参照

javascript - Canvas toDataURL() は空白の画像を返します

glfx.jsを使用して画像を編集していますが、関数を使用してその画像のデータを取得しようとするとtoDataURL()、空白の画像 (元の画像と同じサイズの幅) が表示されます。

奇妙なことに、Chrome ではスクリプトが完璧に機能します。

私が言及したいのはcanvas、 onload イベントを使用して画像が読み込まれるということです。

また、私のイメージのパスは同じドメインにあります。

問題 (Firefox の場合) は、保存ボタンを押したときです。Chrome は期待どおりの結果を返しますが、Firefox は次のように返します。

この結果の原因は何ですか?どうすれば修正できますか?

0 投票する
1 に答える
1000 参照

php - PNG画像へのPHP dataURL

キャンバスから画像をキャプチャし、ajax post メソッドを介して php ファイルに送信しました。

ここでは、ファイルタイプと拡張子を付けて png に戻す必要があります。fpdfを使用して、この新しい画像をpdfに追加します。

これが私のコードです。壊れた画像リンク アイコンが残っています。

0 投票する
1 に答える
4747 参照

three.js - WebGLrenderer で autoclear と preserveDrawingBuffer の両方を使用する

レンダラーの preserveDrawingBuffer:true を設定した Three.js シーンがあります。これは、renderer.toDataURL を使用してキャンバス上にあるもののスナップショットを取得したいためです。2 つのシーンを使用しているため、renderer.autoClear = false も使用します。それぞれに 1 つのカメラ (もちろん 1 つのレンダラー) を使用します。

問題は、orbitControls を使用してカメラを移動すると、オブジェクトが本来のようにアニメーション化されず、以前の状態がキャンバスに残り、preserveDrawingBuffer:true 設定のために醜い絵を作成していることです (それらは消去されません)。

スナップショット機能、2 つのシーン/カメラ、および軌道制御の両方を使用するにはどうすればよいですか?

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

0 投票する
1 に答える
190 参照

javascript - Paperjsは、ビューからの境界でactiveLayerをラスタライズします

私はキャンバス ビューのラスタライズされたサムネイルのようなものを実現したいこのfiddleを持っています。一部のパスがビューの境界をオーバーフローし、それらのオーバーフローした部分もサムネイルにエクスポートされるまで、すべてが正常に機能しますが、これは望ましくありません。キャンバスに表示されている部分のみを親指で表示する必要があります。残念ながらclipMaskを試しましたが、成功しませんでした。

htmlコード

paperscript コード

これをどのように解決できるか考えていますか?

どうぞよろしくお願いいたします。

0 投票する
1 に答える
5387 参照

javascript - キャンバスを画像として保存 Internet Explorer

Microsoft Dynamics CRM 2011 フォームに署名機能を追加するために、いくつかの Web リソースを作成しました。1 つはファイル アップローダーなどとして Silverlight で作成され、もう 1 つは JavaScript と HTML で作成され、画面上で署名を行い、画像として保存します。ただし、コードはGoogle Chromeでのみ機能します。

無限の量のstackoverflowスレッドを調べてみましたが、答えが見つかりません。

とにかく私が何とかできる方法はありますか

  • 現在のソリューションがすでにクロムで機能している方法で、キャンバス画像をIEに保存します
  • 新しいウィンドウを開いてキャンバス イメージを表示し、右クリックして保存できるようにします。

上記の両方をすでに試しましたが、うまくいきませんでした。

それもjavascriptでなければなりません

0 投票する
1 に答える
1022 参照

image - canvas toDataURLを呼び出さずにbase64画像データを取得するには?

私は ie9 または ie10 をサポートする必要があるプロジェクトに参加しています。
データの視覚化に d3.js を使用しています。
ここで、グラフを pdf としてエクスポートする関数を提供する必要があります。
私は可能な解決策を調査してきました。canvas + jsPdf が進むべき道のようです。以下は私が書いたコードです。
しかし問題は、toDataURL が呼び出されると、IE9 と IE10 でセキュリティ エラーが発生することです。jsPdfはbase64画像データしか必要としないので、キャンバスを使用せずにbase64画像データを取得するための回避策があるかどうか疑問に思っていますか???

  1. ルート svg 要素への createObjectURL

    /li>
  2. キャンバスを使用して画像を描画する

    /li>
0 投票する
1 に答える
3013 参照

javascript - アルファチャンネルなしの Canvas toDataURL

ブラウザでアップロードした画像のサイズを変更したいと思います。キャンバスを使用して、アップロードされた画像をキャンバスに描画し、サイズを変更して、toDataURL メソッドの結果を使用しています。

単純化されたコード (アップロード部分なし) は次のようになります。

問題は、dataUrl にアルファ チャネルが含まれていることですが、コンテキストはアルファを false に設定して作成されています。

アルファチャンネルなしでデータ URL を取得することは可能ですか?

そうでない場合は、Javascript 画像ライブラリの 1 つを使用することを検討しましたが、それらのほとんどは canvas に依存しています。

また、キャンバス内のデータを使用して画像をエンコードすることもできましたが、それはしたくありません:)