Html2canvas: Html2canvas、回転画像を使用するとキャンバスがトリミングされます

作成日 2017年06月01日  ·  22コメント  ·  ソース: niklasvh/html2canvas

こんにちは、

このプロジェクトをありがとうございました、
HTML2PDFを使用しましたが、html2canvasの画像の回転に問題があることに気付きました。
回転画像を使用すると、画像が上下からトリミングされ、正しく配置されません。httpsください。

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

Bug

全てのコメント22件

こんにちは@ amine86 、これはhtml2canvasが変換された要素のクリッピングを処理する方法の問題です。これ、ここで(、組み込まれた私のプル要求せずに、元html2canvasを使用し、1をここに)。

これは、html2canvasでのクリッピングの実行方法を書き直す必要があると私が信じているトリッキーな問題です。 transform: translate()問題を修正できましたが、ローテーションは別の問題であり、同じ方法で解決することはできません。

こんにちは@eKoopmansはあなたの助けに感謝します、残念ながら私は回転のこの問題を修正せずに私のプロジェクトでこれを使用することはできません、あなたはうまく機能するプラグインまたはスクリプトがhtmlをcanvasにまたはhtmlをsvgに変換できることを知っていましたか? ライセンスを購入する必要があるトリックでさえ?

ご協力いただきありがとうございます

こんにちは@ amine86 、あなたはこのアプローチで運が良かったかもしれません、SVGを通してそして次にキャンバスにHTMLをレンダリングします:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

ありますrasterizeHTML html2canvasに似ています、。 私はどちらのアプローチもあまり試していません。うまくいくかどうか教えてください!

Hi @ekoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

何かについて教えてください。0.5.0-beta4では、このためのテスト機能をいくつか追加しています。 貢献していくつかの良い結果をまとめるために、そのパーツコードがどこにあるかを確認できますか? ありがとう!

こんにちは@CreativForm 、はい、それは良い考えです、 @ eKoopmansはこれで私たちを助けることができますか?

こんにちは、あなたが説明しているテスト機能がわかりません。 CSS変換のトリミングを修正するために私が行った作業をここで確認でき

@eKoopmansあなたが元気であることを願っています、この問題についてのニュースはありますか?
モジュールhtml2PDFにすでに修正を追加しましたか?

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

ねえ@ amine86 、私は大いに感謝しています! 残念ながら進展はありません...私はようやくコーディングに戻る時間ができたので、すぐにそれをやり遂げることができるかどうかを確認します。

ねえ@eKoopmans 、返信ありがとうございます、あなたがすぐにそれを解決できることを願っています、あなたの助けに感謝します

こんにちは@eKoopmans 、私はあなたが元気であることを願っています、ローテーションのこの問題のためにあなたのモジュール「html2PDF」のアップグレードはありますか?

ありがとう、

いいえ、でもリマインダーをありがとう。 あなたは私が長い休止の後にプロジェクトに戻ったばかりであることに気づいたかもしれません。 これは、いくつかの答えを保持するかもしれない、ちょうど昨日v1.0.0デベロッパーアルファをリリース@niklasvhのように見えます!

@niklasvh読んでいる場合は、申し訳ありませんが、html2canvasを支援するために何もしていません。 うまくいくといいですね!

こんにちは@eKoopmans迅速な対応、ありがとうございました。
はい、最新のリリースをテストしましたが、回転を使用すると常に同じ問題が発生することに気付きました(結果はトリミングされます)。
この最後のリリースでは、「html2pdf」に使用する「スケール」がありませんでしたが、追加するために提供しましたか?

@amineegは、html2canvasまたはhtml2pdfの最新リリースについて話しているのですか?

html2canvasの最新リリースはありscale 、それはありませんが、中に追加のオプションをdpi 。 クリッピングとCSS変換のこの問題にはまだ対処していません。

@eKoopmansはい、その通りです。スケールが含まれています。この回転の問題がすぐに解決されることを願っています。
手伝ってくれてありがとうございます。

スケールのクリッピングの問題が発生しました。
より大きな画像に拡大縮小する場合は正常に機能します(fe transform scale(1.4))
小さい画像に拡大縮小すると、画像がクリップされます(fe transform scale(0.6))

こんにちは@eKoopmans 、この問題に関するニュースはありますか? このローテーションの問題を解決するために、なんとかしてお手伝いできますか?

こんにちは@ eKoopmans @ CreativForm

このバグに関するニュースはありますか?

ありがとう、

こんにちは@amineegいいえ、私の側からは、 @ eKoopmansが何かを言うのを待っています。 :)

@ CreativForm@ eKoopmans @niklasvhに感謝します。この問題に関するニュースはありますか?

@eKoopmansこの問題に関する動きはありますか?

次のコマンドを使用して、ウィンドウを一番上までスクロールしてみてください。

window.scrollTo(0,0);

私はこのソリューションを自分でテストし、それが私のために働いたことを保証することができます-それはhtml2canvasのバグのようです。

理由はわかりませんが、要素が完全に画面外にある場合でも、問題はありません。 しかし、一番上までスクロールされていないのは、キャプチャされたキャンバス画像が、スクロールされた量だけ垂直方向にオフセットして出てくるように見える理由です。

これにより、結果の画像の高さは適切になりますが、上からXピクセルのオフセットが開始され、画像の上部に空白スペースができます。

参照: https

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