私はreactプロジェクトでhtml2canvasを使用しています。 htmlにcanvas要素が含まれていると、html2canvasが機能しないことがわかりました。 キャンバス領域は空で表示されます。
これはhtml画像です
これはキャンバス画像への変換です
キャンバスエリアでは、「echarts-for-react」を使用してレーダーマップを描画します。しかし、[画像の生成]ボタンをクリックすると、ダウンロード画像が完成しません。
私は同じ問題を抱えています。
jsfiddleの例を教えてください。
同じ問題。 ページにchartjsグラフがありますが、レンダリングされなくなりました。 以前のバージョンでレンダリングするために使用されます
問題を示すためにフィドルを作成しました
https://jsfiddle.net/outerbound/v7p71wzr/
これはクロムでは機能していません:(、サファリで機能していることを確認できます:)
問題は、レンダリングする前にコンテナフォームのDOMを削除することです
私は同じ問題を抱えています。 マーカー...
たぶんhtml2canvasはで動作することはできませんgridstack.js
vue(vue-chart.js)でchart.jsを使用する場合にも同じ問題があり、Chromeでのみ発生します
同じ問題があります。html2canvasはgridstack.jsで機能しません。グリッドスタックでhtml2canvansを使用すると、すべての要素が一番上にスタックされます。
@ Nemo0915 gridstack.jsを使用して正常に動作しているため、
同じ問題、Firefoxは問題ありませんが、Chormeは機能しません
@bigfacewo返信ありがとう
オプションを追加できます:removeContainer:falseこの問題を一時的に修正します...。
@IxAresに感謝し
removeContainer:falseを追加しようとしましたが、モバイルChromeでも問題が発生します
@niklasvhそれはまったく機能しません。 このアプリケーションのバージョン1.0.0-rc.5を使用しています。
ねえ、どのような解決策?
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キャンバスに追加しようとしました:
しかし、このエラーが発生しました:
@AchoArnold preserveDrawingBuffer: true
はMapboxのために働いてくれました、ありがとう。
質問:パフォーマンスへの影響に気づきましたか?
Chart.jsを使用していませんが、drawImageを使用したキャンバスでも同じ問題が発生しました。 次のように、drawImageに渡す前にimage.crossOrigin = 'anonymous'をimage要素に配置することで問題を解決しました。
image.crossOrigin = 'anonymous'
それが誰かを助けることができることを願っています:)
それは私の命を救った
最も参考になるコメント
removeContainer:falseを追加しようとしましたが、モバイルChromeでも問題が発生します