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

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

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

Doc： https ：

picture alex-wdmg

最も参考になるコメント

私はそれを解決しました...私が私なら週末に解決策を追加します
時間がある。 遅れてすみません... 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
。

picture chemitaxis 2016年06月29日
🎉3

全てのコメント26件

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

Dayjo picture Dayjo 2016年04月12日

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

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

alex-wdmg picture alex-wdmg 2016年04月12日

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 picture MarcBalaban 2016年04月19日

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

if ( node.tagName === 'SVG' ) {
    return node.getBoundingClientRect();
  }
Dayjo picture Dayjo 2016年04月19日

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

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

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

MarcBalaban picture MarcBalaban 2016年04月19日

うーん、もう少し詳しく見てみると、ここで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

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

Dayjo picture Dayjo 2016年04月20日

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

chemitaxis picture chemitaxis 2016年05月19日

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

Dayjo picture Dayjo 2016年06月07日

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

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

Dayjo picture Dayjo 2016年06月28日

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 picture Dayjo 2016年06月28日

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

sumigoma picture sumigoma 2016年06月29日

私はそれを解決しました...私が私なら週末に解決策を追加します
時間がある。 遅れてすみません... 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 picture chemitaxis 2016年06月29日
🎉3

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

sumigoma picture sumigoma 2016年06月29日

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

sumigoma picture sumigoma 2016年07月07日
👍1

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

atdiff picture atdiff 2016年07月21日

こんにちは@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 picture jgunderson-IAS 2016年10月20日

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

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

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

Dayjo picture Dayjo 2016年10月21日

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

Dayjo picture Dayjo 2016年10月24日

これは、親要素の幅に基づいて '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つよりもはるかに多く押しつぶされます。

Dayjo picture Dayjo 2016年10月24日

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

Dayjo picture Dayjo 2016年10月24日

1.0.0で修正

niklasvh picture niklasvh 2017年12月12日
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

ABHIKSINGHH picture ABHIKSINGHH  ·  3コメント
wbarrantes picture wbarrantes  ·  3コメント
AlphaDu picture AlphaDu  ·  4コメント
diego-rey picture diego-rey  ·  3コメント
dking3876 picture dking3876  ·  4コメント