Html2canvas: Pencocokan warna-stop gagal dengan TypeError karena regexp yang salah

Dibuat pada 4 Nov 2014 · 29Komentar · Sumber: niklasvh/html2canvas

Saya melihat TypeError saat menggunakan kata kunci berwarna (mis. transparent , sebagai lawan dari nilai rgb() ) karena cocok dengan regex "langkah" di LinearGradientContainer akan selalu mengembalikan null dalam kasus itu ( lihat baris ini ).

Bisakah Anda memperbarui regexp agar berfungsi seperti yang diharapkan dengan kata kunci warna [a-z]+ serta notasi fungsional rgb() / rgba() ? Atau apakah Anda akan terbuka untuk permintaan tarik yang melakukan hal itu? (Saya bahkan dapat menambahkan dukungan hsl() / hsla() ke regexp, jika Anda mau...) Terima kasih!

Bug

Sumber

usmonster

Semua 29 komentar

Permintaan tarik dengan perbaikan dan pengujian untuk mendukungnya akan sangat baik!

niklasvh pada 4 Nov 2014

Saya akan mencoba untuk melihat akhir pekan ini. Catatan untuk diri sendiri:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

usmonster pada 5 Nov 2014

Mengenai penerapan inset gaya perbatasan, ada kebutuhan untuk mendapatkan penguraian umum untuk warna juga, karena perlu menggelapkan/mencerahkan warna dengan persentase tertentu. Dengan perbaikan gradien ini, jika ada kebutuhan untuk mengurai warna ke dalam format umum, itu bisa berguna dengan gaya perbatasan: inset juga.

Misalnya, jika ada warna (hex, rgb, rgba, hls, hlsa, nama yang telah ditentukan sebelumnya seperti 'merah', 'hijau' dll.) dapat diuraikan menjadi objek Warna dengan r, g, b dan nilai yang ditentukan, itu akan membuatnya secara signifikan lebih mudah untuk menerapkan sisipan perbatasan juga.

niklasvh pada 5 Nov 2014

Setuju bahwa penguraian/representasi warna umum dapat dan harus digunakan kembali. Saya akan mengingatnya dan mungkin memiliki pertanyaan.

usmonster pada 5 Nov 2014

Tidak mendapat kesempatan untuk melihat ini selama akhir pekan, mungkin/semoga punya waktu besok.

usmonster pada 10 Nov 2014

Ada pembaruan tentang ini?

niklasvh pada 25 Nov 2014

Eh maaf, belum. :/ Telah kebanjiran dan memiliki sumber daya komputasi yang terbatas, meskipun saya telah menyiapkan beberapa tes secara lokal (belum menerapkan apa pun).

usmonster pada 27 Nov 2014

Saya telah menambahkan penguraian warna dasar (bernama, rgb, rgba, hex3 dan hex6 sejauh ini) dan mengubah semua penggunaan warna untuk menggunakannya. Regexps gradien belum diperbarui.

Lihat https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5

niklasvh pada 13 Des 2014

Bagus! Saya akan melihat akhir pekan ini dan melihat tentang memperbarui regexps itu.

usmonster pada 18 Des 2014

@niklasvh Bisakah Anda melihat komit yang baru saja saya buat di cabang saya (359ee8b) dan beri tahu saya pendapat Anda? Saya akan menghapus komentar saya yang berlebihan dan akan segera menambahkan tes untuk nama warna, tetapi bisakah Anda juga melihat perubahan lainnya?

Saya mengoreksi penguraian arah untuk Firefox, jadi gradien linier tertentu yang sebelumnya tidak dirender dengan benar seharusnya sekarang berfungsi. Anda dapat melihat tes manual yang sementara saya masukkan tests/lineargradients_manual.html (pada dasarnya salinan tests/cases/background/linear-gradient.html ). Saya kira saya dapat memverifikasi peningkatan akurasi dan tidak ada regresi pada browser/versi lain setelah tes Selenium dapat dijalankan, tetapi dapatkah Anda memeriksa untuk melihat apakah ini baik-baik saja? Saya menduga peningkatan akurasi render mungkin hanya terlihat membandingkan versi FF yang lebih baru daripada yang diuji .. (Sepertinya satu-satunya versi Firefox yang diuji adalah 15??)

usmonster pada 6 Jan 2015

Hmm, tahan pikiran itu, saya mungkin telah melakukan sesuatu yang aneh, kotak di mesin rumah saya sebagian besar berwarna hitam sekarang..

usmonster pada 6 Jan 2015

Ah, tidak, sepertinya 498527918c3324dce77260057bc47c280cc3324f adalah komit masalahnya, barang-barang saya terlihat ok. :keringat_senyum:

usmonster pada 6 Jan 2015

Apa yang terjadi jika persentasenya lebih dari 100% atau 0%?

niklasvh pada 10 Jan 2015

Sampai sekarang itu tidak mendukung persentase sewenang-wenang (meninggalkannya sebagai default 50%), tetapi saya dapat menambahkannya dengan cukup mudah. ( Pembaruan : menambahkan dukungan untuk persentase sewenang-wenang: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

Yang saya tidak yakin adalah panjang non-persentase, yang bisa dalam px , em , rem , ex , cm , mm , in , pc , pt , dll... Saya belum mencarinya dalam kode, tetapi apakah Anda sudah memiliki cara untuk menangani/mengonversi panjang berbagai unit? (Jika tidak, apakah itu harus menjadi bagian dari fitur ini, atau haruskah itu diterapkan secara terpisah?)

usmonster pada 10 Jan 2015

panjang absolut harus mudah diterapkan, tetapi saya pikir px harus cukup untuk memulai.

niklasvh pada 10 Jan 2015

@niklasvh Saya baru saja mendapat lebih banyak waktu untuk melihat dan mengerjakan ini. Bisakah Anda melihat cabang fix-firefox-gradients dan berkomentar sebelum saya membuat permintaan tarik?

Saya harus mencatat bahwa, meskipun regexps dapat mengurai panjang piksel (baik dalam posisi awal gradien dan posisi berhenti warna), masih belum ada dukungan untuk merendernya dengan benar. Saya pikir cara terbersih untuk menambahkan dukungan untuk panjang absolut adalah dengan memasukkan informasi batas dengan imageData yang diteruskan ke konstruktor wadah gradien, dan kemudian mengubahnya menjadi persentase. Itu mungkin harus masuk dalam permintaan tarik terpisah.

usmonster pada 16 Mar 2015

Terima kasih! Akan melihat lebih dekat ini segera dan kembali kepada Anda dengan umpan balik yang mungkin saya miliki

niklasvh pada 29 Mar 2015

Ada kemajuan dalam hal ini? Itu masih dibutuhkan!

ccemeraldeyes pada 19 Jun 2015

Saya siap membuat permintaan tarik jika @niklasvh dapat memberikan acungan jempol pada pendekatan yang saya gunakan di cabang saya..

usmonster pada 19 Jun 2015

:+1: Saya baru saja mengalami ini:

TypeError: Cannot read property '1' of null at GradientContainer.<anonymous> (http://localhost:8100/all.js:34496:44) 
at Array.map (native) 
at GradientContainer.LinearGradientContainer (http://localhost:8100/all.js:34493:66)
at ImageLoader.279.ImageLoader.loadImage (http://localhost:8100/all.js:34367:16) 
at ImageLoader.<anonymous> (http://localhost:8100/all.js:34339:46) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.addImage (http://localhost:8100/all.js:34337:23) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.findBackgroundImage (http://localhost:8100/all.js:34331:71) 
at 295.exports.bind (http://localhost:8100/all.js:36357:25)

ptarjan pada 1 Okt 2015

Hai @niklasvh! Terima kasih telah memperbaiki #526.

Apakah Anda pernah mendapat kesempatan untuk melihat cabang fix-firefox-gradients ? Saya akan rebase cabang saya (dan memperbaiki konflik baru) sebelum saya membuat PR, tapi tolong beri tahu saya jika PR masih diterima. (Apakah menurut Anda Anda dapat meninjaunya dalam waktu yang wajar?) Terima kasih!

usmonster pada 18 Okt 2015

@usmonster Tidak, maaf saya melewatkannya. Satu masalah potensial yang saya pikirkan saat melakukan perbaikan itu adalah jika browser memutuskan untuk tidak mengonversi warna bernama seperti red atau blue ke masing-masing rgb atau rgba nilai, hanya dengan mempertimbangkan transparent tidak akan berfungsi. Modul Color memperhitungkan semua variasi warna yang berbeda, tetapi saya tidak cukup senang dengan bagaimana penguraian saat ini dilakukan di master untuk memulai.

Adakah ide bagaimana warna yang disebutkan dapat ditangani?

niklasvh pada 18 Okt 2015

@niklasvh , Color harus cukup untuk menangani semua warna bernama, kecuali saya salah memahami sesuatu?

Selain itu, saya telah memperbaiki ekspresi reguler yang digunakan untuk mengurai warna dan gradien linier untuk membuatnya lebih kuat, benar, dan berkinerja, jadi menurut saya warna bernama seharusnya tidak menjadi masalah. Bagaimana menurutmu?

usmonster pada 18 Okt 2015

@usmonster Anda benar, saya merujuk ke https://github.com/niklasvh/html2canvas/compare/master...usmonster :fix-firefox-gradients#diff-48b5afb6985c457b9f79fcca1cfb499dR21 yang sekarang saya perhatikan tidak memperhitungkan warna bernama, jadi tidak ada masalah disana. Terlihat bagus jika tidak, maukah Anda melakukan rebasing dan mengajukan permintaan tarik?

niklasvh pada 18 Okt 2015

Tidak masalah! Saya akan mencoba untuk melihat dalam beberapa hari ke depan - saya agak melewatkan jendela akhir pekan saya. :/

usmonster pada 19 Okt 2015

@niklasvh Silakan lihat #708. :)

usmonster pada 24 Okt 2015

Saya menerima "TypeError: colorStopMatch is null" di html2canvas.js:1454:13 di FireFox. Di Chrome itu berfungsi.

Observer999 pada 29 Des 2016

Hai @Observer999! Masalah ini ditutup. Harap telusuri masalah terbuka yang serupa atau buat masalah baru dengan tautan ke halaman yang mereproduksi masalah yang Anda alami. (Harap tentukan juga versi Firefox mana yang Anda uji.) Saya dapat membayangkan itu mungkin ada hubungannya dengan TODO dalam kode.. Terima kasih!

usmonster pada 29 Des 2016

@usmonster @niklasvh Halo teman-teman Saya tahu masalah ini telah ditutup tetapi saya menggunakan html2canvas versi terbaru dan saya mendapatkan kesalahan yang sama di Chrome versi terbaru tetapi di Firefox berfungsi.

html2canvas.js: diformat:1377 Tidak tertangkap (dalam janji) TypeError: Tidak dapat membaca properti '1' dari nol
di LinearGradientContainer.(html2canvas.js:diformat:1377)
di Array.map ()
di LinearGradientContainer baru (html2canvas.js:formatted:1374)
di ImageLoader.loadImage (html2canvas.js:format:1256)
di ImageLoader.(html2canvas.js:format:1227)
di Array.forEach ()
di ImageLoader.(html2canvas.js:format:1225)
di Array.forEach ()
di ImageLoader.findBackgroundImage (html2canvas.js:format:1219)
di html2canvas.js: diformat:2563