これを上げようとしていた! 今月は少し心配なことが機能しなくなります。
はい、どうやら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 :)私は他のライブラリを使用して問題を解決しました...
With this, I can convert SVG to Canvas, and them, export fine...
2016-07-21 20:36 GMT+02:00 atdiff notifications@github.com:
@chemitaxis https://github.com/chemitaxis any progress on this? I'm
hoping to test the code out on a project I'm doing to see if it solves all
of my SVG problems especially with IE.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment-234343779,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABWseVDGMW_cSyV_ZMDkkUilXC5mK_Mrks5qX7wcgaJpZM4IDr12
.
したがって、 @ chemitaxisはこの問題を修正
はい、ミキシングを使用しています...しかし、完全に統合しました。統合してプルリクエストを実行するには、リファクタリングする必要があります...しかし、時間がありません...申し訳ありませんが、できるだけ早くサンプルをアップロードします。 一番。
それはほとんど修正されません...他のライブラリを使用してそのような問題を回避する必要はないはずです。 SVGは正しく配置されていないため、正しい位置を計算するだけで済みます。
誰かが実際にこれの修正を見つけましたか? SVGはもはやレンダリングされていないようです。
これは修正ではありませんが、小さな回避策を見つけました。 また、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がどのようにレンダリングされるかの例です。
私が使用しています。
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で修正
最も参考になるコメント
私はそれを解決しました...私が私なら週末に解決策を追加します
時間がある。 遅れてすみません... FF、Safari、Chromeで動作しています。
一番。
19:00水曜日、2016年6月29日には、ユキKの[email protected]は書きました: