Html2canvas: 「SVGElement.offsetWidth」は非推奨になり、2016年4月頃にM50で削除されます。

作成日 2016年04月09日  ·  26コメント  ·  ソース: niklasvh/html2canvas

GoogleはSVGの「offsetWidth」のサポートを拒否しました。
アイデアはありますか?

Doc: https

最も参考になるコメント

私はそれを解決しました...私が私なら週末に解決策を追加します
時間がある。 遅れてすみません... FF、Safari、Chromeで動作しています。
一番。
19:00水曜日、2016年6月29日には、ユキKの[email protected]書きました:

@Dayjo https://github.com/Dayjoはい、私もこれに気づきました。 SVGは
完全に間違った位置にあり、ほとんどの場合、画面から外れています。
すべてのオフセット*は未定義と評価されます。 私も解決に挑戦しました
これは再帰的なgetBoundingClientRectを使用しています-しかし運がありません:(私は
あなたの支店を見てください。


あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12

全てのコメント26件

これを上げようとしていた! 今月は少し心配なことが機能しなくなります。

はい、どうやらOpera37ベータ版では機能しません。 さらに、プラグインの最新バージョンでは、背景と境界線が表示されます。 私は持っています、彼らはチェックしませんか?

デモでも、背景と境界線は表示されません((

SVGがレンダリングされなくなるため、これは大きな問題です。

最大の原因はこの関数内にあります。

function offsetBounds(node) {
    var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

    return {
        top: node.offsetTop + parent.top,
        bottom: node.offsetTop + node.offsetHeight + parent.top,
        right: node.offsetLeft + parent.left + node.offsetWidth,
        left: node.offsetLeft + parent.left,
        width: node.offsetWidth,
        height: node.offsetHeight
    };
}

html2canvas.jsのlines 1887 - 1898

すべてのoffsetTop, offsetLeft, offsetWidth, offsetHeightがSVGに対して未定義になりました

推奨される解決策はgetBoundingClientRect()ですが、それでも機能させることはできません。

誰かがこれに対する解決策を持っていますか?

@MarcBalabanまだ試していませんが、関数の戻り値の上にこれを追加するだけではありません。

if ( node.tagName === 'SVG' ) {
    return node.getBoundingClientRect();
  }

@Dayjo残念ながらそうではありません、それは間違いなく正しい道を進んでいますが、この行

var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

offsetParentも減価償却されているため、正しく実行されません。

うーん、もう少し詳しく見てみると、ここでgetBoundingBoxInArbitrarySpace関数のようなものを使用する必要があるかもしれません。 https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.jsあたりとしてhttp://stackoverflow.com / questions / 5996005 / how-to-use-element-offsetparent-with-html-svg-elements#answers

しかし、まだどんな種類のテストもする機会がありませんでした。

この問題に関するニュースはありますか? ありがとう!

@ chemitaxis-警告にもかかわらず、これまでのところ、html2canvasの結果に問題はありませんでした。 ただし、この変更が実際にChromeに実装されるかどうか/いつ実装されるかは誰にもわかりません

これでChromeの動作が停止したようです。 SVGは、まったくレンダリングされていないか、正しく表示されていないか、間違った縮尺で/キャンバス内の位置に表示されているようです。

@ niklasvh-これについて何か考えはありますか? 時間があれば、喜んで修正を加えることができますが、現時点ではチョカです。

https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.jsを使用してこれを撮影しました

しかし、どこに実装する必要があるのか​​わからなかったので、 offsetBounds getBounds関数と

最新のベータコミットを使用して、ここ(https://github.com/Dayjo/html2canvas/tree/issue-846)で予備ブランチを実行しています。 誰かがテストしたい場合は、 distバージョンを使用できるか、必要に応じて再構築できるはずです。 どれだけうまくいくか/まったくうまくいくかどうかはわかりません。

@Dayjoはい、私もこれに気づきました。 SVGは完全に間違った位置にあり、すべてのオフセット*が未定義と評価されるため、ほとんどの場合画面から外れます。 また、再帰的なgetBoundingClientRectを使用してこれを解決しようとしましたが、運が悪かったです:(ブランチを見てみましょう。

私はそれを解決しました...私が私なら週末に解決策を追加します
時間がある。 遅れてすみません... FF、Safari、Chromeで動作しています。
一番。
19:00水曜日、2016年6月29日には、ユキKの[email protected]書きました:

@Dayjo https://github.com/Dayjoはい、私もこれに気づきました。 SVGは
完全に間違った位置にあり、ほとんどの場合、画面から外れています。
すべてのオフセット*は未定義と評価されます。 私も解決に挑戦しました
これは再帰的なgetBoundingClientRectを使用しています-しかし運がありません:(私は
あなたの支店を見てください。


あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12

@chemitaxis素晴らしい! 修正を楽しみにしています。

@chemitaxisさん、時間があればPRを作成したり、フォークにリンクしたりできますか?

@chemitaxisこれに関する進展はありますか? 私が行っているプロジェクトでコードをテストして、特にIEでのSVGの問題がすべて解決されるかどうかを確認したいと思っています。

こんにちは@atdiff :)私は他のライブラリを使用して問題を解決しました...

これは修正ではありませんが、小さな回避策を見つけました。 また、SVGをChromeで正しく表示することはできませんでしたが、Safariでは表示されました。 私がしたのは、SVGインライン要素にwidth属性を追加することだけでした。 幅属性が不正確な場合でも、ChromeとSafariの両方で本来のように印刷されます。

    var deferred = $q.defer();

    element.find('svg').attr('width', '100px');

    html2canvas(element, {
        background: '#eee',
        onrendered: function(canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg', 1).replace('image/jpeg', 'image/octet-stream');
            a.download = fileName + '.jpg';
            a.click();
            deferred.resolve();
        }
    });

    return deferred.promise;

編集:関連のない追加するものがありますが、ここで検索すると他の人が役立つ場合があります。 Firefoxは私の上記の方法では動作しないようでした。 私のSVGには、16進色の#記号がありました(例:#ccc)。 これらはURLの予約文字であり、Firefoxはそれについて厳格であるため、SVGは表示されませんでした。 代わりにrgb値に置き換えたところ、Firefoxが正しく表示されるようになりました。

@ jgunderson-IASこれに感謝します。簡単な回避策として試してみます。

うまくいけば、このバグを調べるのに1日を費やす機会が得られると思います。おそらく、これに半日、次にそれを使用していることに半日かかりますが、おそらく実装する機会を与えてくれるはずです。本当の解決策。

@niklasvhは、これをまったく確認したかどうか、または修正を実装するための最善の方法について提案があるかどうかわからない(https://github.com/niklasvh/html2canvas/issues/846#issuecomment-229035694を参照)。 )

@ jgunderson-IAS私はSVGのサイズを明示的に設定してきましたが、このハッキーなアプローチはレンダリングされることを意味しますが、サイズに一貫性がないようです。高さと重量の両方のプロパティを設定していますが、定期的に押しつぶされて表示されます。 '。 残念ながら、私のページはCSSによって制御され、コンテナーの100%であるsvgサイズに依存しているため、これは足がかりですが、サイズを適切に計算するには、ライブラリの再コーディングを検討する必要があると思います。

これは、親要素の幅に基づいて 'onClone'イベントの幅を設定している(すべてのsvgはcssで100%の幅に設定されている)ため、svgがどのようにレンダリングされるかの例です。

html

image

キャンバス

image

私が使用しています。

onclone: function(doc){
    var w,h;
    var svgs = doc.querySelectorAll('svg');
    for ( var s = 0; s < svgs.length; ++s ) {
        w = svgs[s].parentElement.offsetWidth;
        svgs[s].setAttribute('width', w );
    }
}

アスペクト比をどれだけうまくレンダリングするかは、svg自体に本当に依存しているようです。 たとえば、最初の(リーフ)svgは、他の2つよりもはるかに多く押しつぶされます。

残念ながら、私はhtml2canvasの使用をやめ、代わりにサーバー側のソリューション( wkhtmltoimage )を使用する必要がありました。これは、svgを正確にレンダリングできないためです。 getBoundingClientRectまたはgetBBoxなどを使用して動作させることができませんでした

1.0.0で修正

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