Html2canvas: 'SVGElement.offsetWidth' tidak digunakan lagi dan akan dihapus di M50, sekitar April 2016
Google telah menolak untuk mendukung "offsetWidth" untuk SVG.
Ada ide?
alex-wdmg
Semua 26 komentar
Baru saja akan menaikkan ini! Sedikit khawatir sesuatu akan berhenti bekerja bulan ini.
Dayjo
pada 12 Apr 2016
Ya, ternyata di Opera 37 beta tidak berfungsi. Selain itu, versi terbaru dari masalah plug-in untuk menampilkan latar belakang dan perbatasan. Saya punya satu, mereka tidak memeriksa?
Dalam demo juga, latar belakang dan batas tidak ditampilkan ((
alex-wdmg
pada 12 Apr 2016
Ini adalah masalah besar karena SVG kami tidak akan lagi dirender.
Pelaku terbesar ada di dalam fungsi ini:
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
};
}
lines 1887 - 1898 di html2canvas.js
Semua offsetTop, offsetLeft, offsetWidth, offsetHeight sekarang tidak ditentukan untuk SVG
Solusi yang disarankan adalah getBoundingClientRect() , tetapi masih tidak dapat membuatnya berfungsi.
Apakah ada yang punya solusi untuk ini?
MarcBalaban
pada 19 Apr 2016
@MarcBalaban Saya belum mencobanya, tetapi apakah itu tidak hanya menambahkan ini ke atas pengembalian dalam fungsi itu;
if ( node.tagName === 'SVG' ) {
return node.getBoundingClientRect();
}
@Dayjo sayangnya tidak, itu pasti di jalur yang benar, tapi jalur ini
var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};
tidak dieksekusi dengan baik baik sebagai offsetParent juga telah disusutkan:
MarcBalaban
pada 19 Apr 2016
Hmm ya, melihat lebih jauh ke dalamnya, mungkin perlu menggunakan sesuatu seperti fungsi getBoundingBoxInArbitrarySpace di sini; https://svn.Apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js sesuai http://stackoverflow.com /questions/5996005/how-to-use-element-offsetparent-with-html-svg-elements#answers
Belum memiliki kesempatan untuk melakukan pengujian apa pun.
Dayjo
pada 20 Apr 2016
Ada berita tentang masalah ini? Terima kasih!
chemitaxis
pada 19 Mei 2016
@chemitaxis - meskipun ada peringatan, sejauh ini saya tidak punya masalah dengan hasil html2canvas. Namun, siapa yang tahu jika / kapan perubahan ini benar-benar akan diterapkan di Chrome
Dayjo
pada 7 Jun 2016
Sepertinya ini sekarang telah berhenti bekerja Chrome. SVG tampaknya tidak dirender sama sekali, salah, atau pada skala / posisi yang salah di kanvas.
@niklasvh - ada pemikiran tentang ini? Jika saya punya waktu, saya akan dengan senang hati memperbaikinya tetapi saya choca saat ini.
Dayjo
pada 28 Jun 2016
Saya mencoba ini menggunakan https://svn.Apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js
Tetapi tidak yakin di mana saya perlu mengimplementasikannya, saya mencoba di kedua fungsi offsetBounds dan getBounds tetapi tidak berhasil. Koordinat X dan Y tampaknya benar, tetapi lebar dan tinggi semuanya salah, tidak yakin apakah ini karena saya menggunakan css untuk membuat SVG 100% lebar wadah dan tinggi otomatis. Perlu melakukan beberapa pengujian yang lebih ekstensif.
Saya memiliki cabang awal yang terjadi di sini ( https://github.com/Dayjo/html2canvas/tree/issue-846 ), menggunakan komit beta terbaru. jika ada yang ingin menguji, harus dapat menggunakan versi dist , atau hanya membangun kembali jika Anda mau. Tidak tahu seberapa baik / jika sama sekali itu akan berhasil.
Dayjo
pada 28 Jun 2016
@Dayjo Ya, saya juga memperhatikan ini. SVG benar-benar berada di posisi yang salah dan hampir selalu keluar dari layar sekarang karena semua offset* dievaluasi menjadi tidak terdefinisi. Saya juga mencoba menyelesaikan ini menggunakan getBoundingClientRect rekursif - tetapi tidak berhasil :( Saya akan melihat cabang Anda.
sumigoma
pada 29 Jun 2016
Saya telah menyelesaikannya... Saya akan menambahkan solusi pada akhir minggu jika saya
punya waktu. Maaf atas keterlambatannya... Ini berfungsi di FF, Safari, dan Chrome.
Terbaik.
Pada hari Rabu, 29 Jun 2016 pukul 19:00, Yuki K [email protected] menulis:
@Dayjo https://github.com/Dayjo Ya, saya juga memperhatikan ini. SVG adalah
benar-benar dalam posisi yang salah dan hampir selalu keluar dari layar sekarang
semua offset*s dievaluasi menjadi tidak terdefinisi. Saya juga mencoba memecahkan
ini menggunakan getBoundingClientRect rekursif - tetapi tidak berhasil :( Saya akan mengambil
lihat cabangmu.—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
atau matikan utasnya
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.
chemitaxis
pada 29 Jun 2016
@chemitaxis Luar biasa! Menantikan untuk memperbaikinya.
sumigoma
pada 29 Jun 2016
Hai @chemitaxis , bisakah Anda membuat PR atau tautan ke garpu Anda jika Anda punya waktu?
sumigoma
pada 7 Jul 2016
@chemitaxis ada kemajuan dalam hal ini? Saya berharap untuk menguji kode pada proyek yang saya lakukan untuk melihat apakah itu menyelesaikan semua masalah SVG saya terutama dengan IE.
atdiff
pada 21 Jul 2016
Hai @atdiff :) Saya telah memecahkan masalah menggunakan perpustakaan lain ...
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
pada 22 Jul 2016
Jadi @chemitaxis tidak memperbaiki masalah ini, baru saja menemukan solusi yang tidak lagi menggunakan html2canvas?
Dayjo
pada 22 Jul 2016
Ya, menggunakan pencampuran ... Tapi saya telah sepenuhnya terintegrasi, saya perlu refactoring untuk mengintegrasikan dan melakukan permintaan tarik ... Tapi saya tidak punya waktu ... Maaf, saya akan mengunggah contoh ASAP. Terbaik.
chemitaxis
pada 22 Jul 2016
Itu bukan perbaikan... Seharusnya tidak perlu untuk mengatasi masalah seperti itu menggunakan perpustakaan lain. SVG hanya salah ditata, dan seharusnya hanya masalah menghitung posisi yang benar.
sumigoma
pada 22 Jul 2016
Adakah yang benar-benar menemukan perbaikan untuk ini? SVG sepertinya tidak lagi dirender.
Dayjo
pada 13 Sep 2016
Ini bukan perbaikan tetapi saya memang menemukan solusi kecil. Saya juga tidak bisa menampilkan SVG dengan benar di Chrome tetapi akan ditampilkan di Safari. Yang saya lakukan hanyalah menambahkan atribut lebar ke elemen sebaris SVG. Bahkan dengan atribut lebar yang tidak akurat, itu dicetak seperti seharusnya di Chrome dan 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;
Sunting: Sesuatu untuk ditambahkan yang tidak terkait tetapi yang lain mungkin berguna saat mencari di sini. Firefox sepertinya tidak berfungsi dengan metode saya di atas. SVG saya memiliki # tanda untuk warna hex (mis: #ccc). Karena ini adalah karakter yang dicadangkan di URL dan Firefox sangat ketat tentang hal itu, SVG tidak muncul. Saya menggantinya dengan nilai rgb dan sekarang Firefox ditampilkan dengan benar.
jgunderson-IAS
pada 20 Okt 2016
@jgunderson-IAS terima kasih untuk ini, saya akan mencobanya sebagai solusi cepat.
Mudah-mudahan saya akan mendapatkan kesempatan untuk menghabiskan satu hari melihat bug ini, yah, mungkin setengah hari untuk ini, lalu setengah hari untuk apa saya menggunakannya, tetapi seharusnya memberi saya kesempatan untuk mengimplementasikan a solusi nyata.
@niklasvh tidak yakin apakah Anda telah melihat ini sama sekali, atau jika Anda memiliki saran tentang cara terbaik untuk menerapkan perbaikan (lihat: https://github.com/niklasvh/html2canvas/issues/846#issuecomment-229035694 )
Dayjo
pada 21 Okt 2016
@jgunderson-IAS Saya telah secara eksplisit mengatur ukuran SVG, dan sementara pendekatan hacky ini berarti bahwa mereka dirender, sepertinya ukurannya tidak konsisten, saya mengatur properti tinggi dan berat, namun mereka secara teratur muncul 'terjepit '. Sayangnya halaman saya bergantung pada ukuran svg yang dikendalikan oleh CSS dan menjadi 100% dari wadah mereka, jadi sementara ini adalah batu loncatan, saya pikir saya harus melihat pengodean ulang perpustakaan untuk menghitung ukuran dengan benar
Dayjo
pada 24 Okt 2016
Berikut adalah contoh bagaimana svgs dirender sekarang setelah saya mengatur lebar pada acara 'onClone' berdasarkan lebar elemen induk (semua svgs disetel ke lebar 100% dalam css), tinggi tampaknya semakin mengacaukannya;
html
kanvas
Saya menggunakan;
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 );
}
}
Sepertinya itu sangat tergantung pada svg itu sendiri tentang seberapa baik rasio aspeknya. Misalnya svg (daun) pertama, lebih banyak terjepit daripada dua lainnya.
Dayjo
pada 24 Okt 2016
Sayangnya saya harus meninggalkan penggunaan html2canvas dan menggunakan solusi sisi server sebagai gantinya ( wkhtmltoimage ) secara khusus karena itu tidak dapat membuat svgs secara akurat. Saya tidak dapat membuatnya berfungsi menggunakan getBoundingClientRect atau getBBox dll
Dayjo
pada 24 Okt 2016
Tetap di 1.0.0
niklasvh
pada 12 Des 2017
Masalah terkait
anthonymejia
·
4Komentar
rrutkows
·
4Komentar
arzyu
·
3Komentar
stevencherry1
·
3Komentar
diego-rey
·
3Komentar
Komentar yang paling membantu
Saya telah menyelesaikannya... Saya akan menambahkan solusi pada akhir minggu jika saya
punya waktu. Maaf atas keterlambatannya... Ini berfungsi di FF, Safari, dan Chrome.
Terbaik.
Pada hari Rabu, 29 Jun 2016 pukul 19:00, Yuki K [email protected] menulis: