<p>htmlにcanvas要素が含まれている場合、html2canvasは機能しません</p>

作成日 2017年12月13日  ·  29コメント  ·  ソース: niklasvh/html2canvas

バグレポート:

私はreactプロジェクトでhtml2canvasを使用しています。 htmlにcanvas要素が含まれていると、html2canvasが機能しないことがわかりました。 キャンバス領域は空で表示されます。

仕様:

これはhtml画像です
image

これはキャンバス画像への変換です

image

キャンバスエリアでは、「echarts-for-react」を使用してレーダーマップを描画します。しかし、[画像の生成]ボタンをクリックすると、ダウンロード画像が完成しません。

  • テストされたhtml2canvasバージョン:1.0.0-alpha.4
  • ブラウザとバージョン:Chrome 60.0.3112.7
  • オペレーティングシステム:ウィンドウ
Bug

最も参考になるコメント

removeContainer:falseを追加しようとしましたが、モバイルChromeでも問題が発生します

全てのコメント29件

私は同じ問題を抱えています。

jsfiddleの例を教えてください。

同じ問題。 ページにchartjsグラフがありますが、レンダリングされなくなりました。 以前のバージョンでレンダリングするために使用されます

問題を示すためにフィドルを作成しました
https://jsfiddle.net/outerbound/v7p71wzr/

これはクロムでは機能していません:(、サファリで機能していることを確認できます:)

問題は、レンダリングする前にコンテナフォームのDOMを削除することです

私は同じ問題を抱えています。 マーカー...

たぶんhtml2canvasはで動作することはできませんgridstack.js

vue(vue-chart.js)でchart.jsを使用する場合にも同じ問題があり、Chromeでのみ発生します

同じ問題があります。html2canvasはgridstack.jsで機能しません。グリッドスタックでhtml2canvansを使用すると、すべての要素が一番上にスタックされます。
image

@ Nemo0915 gridstack.jsを使用して正常に動作しているため、

同じ問題、Firefoxは問題ありませんが、Chormeは機能しません

@bigfacewo返信ありがとう
image

@ Nemo0915 0.5.0-beta4バージョンは正常にjsfiddle 。 スクリーンショットは次のとおりです。
qq 20171220150328
1.0.0- alpha4バージョンの
qq 20171220150946

Chromeバージョン:63.0.3239.108
Firefoxバージョン:57.0.2

オプションを追加できます:removeContainer:falseこの問題を一時的に修正します...。

@IxAresに感謝し

removeContainer:falseを追加しようとしましたが、モバイルChromeでも問題が発生します

@niklasvhそれはまったく機能しません。 このアプリケーションのバージョン1.0.0-rc.5を使用しています。
Screenshot 2020-02-17 at 10 54 42 AM

ねえ、どのような解決策?

2020年問題はまだここにあります。

+1私もこの振る舞いを見ています。

問題はまだ存在します

Chart.jsとFirefox76.0(64ビット)ブラウザにはまだ問題があります

ねえ、要素内のMapboxで同じ問題が発生しています。ここで助けてください。
removeContainer:falseも試しましたが、機能しませんでした。

@Rajeshgtstplmapboxでも同様の問題が発生しました。 マップボックスオプションでpreserveDrawingBuffer: trueを設定することで解決しました。

Chart.jsを使用していませんが、drawImageを使用したキャンバスでも同じ問題が発生しました。 次のように、drawImageに渡す前にimage.crossOrigin = 'anonymous'をimage要素に配置することで問題を解決しました。

image.crossOrigin = 'anonymous'

それが誰かを助けることができることを願っています:)

こんにちはみんな、私は同様のキャンバスエクスポートの問題を抱えていますが、threejsシーンで、何か推奨事項はありますか? v1.0.0-rc.7で試しましたが、threejsキャンバス以外はすべてエクスポートされます。

編集:私は次のようにthreejsキャンバスに追加しようとしました:

image

しかし、このエラーが発生しました:

image

@AchoArnold preserveDrawingBuffer: trueはMapboxのために働いてくれました、ありがとう。

質問:パフォーマンスへの影響に気づきましたか?

Chart.jsを使用していませんが、drawImageを使用したキャンバスでも同じ問題が発生しました。 次のように、drawImageに渡す前にimage.crossOrigin = 'anonymous'をimage要素に配置することで問題を解決しました。

image.crossOrigin = 'anonymous'

それが誰かを助けることができることを願っています:)

それは私の命を救った

このページは役に立ちましたか?
0 / 5 - 0 評価