Html2canvas: 잘못된 정규 표현식으로 인해 TypeError와 함께 색상 정지 일치가 실패합니다.

이를 지원하기 위한 수정 및 테스트가 포함된 pull 요청은 훌륭할 것입니다!

이번 주말에 보려고 합니다. 자신에 대한 참고 사항:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

테두리 스타일 삽입 구현과 관련하여 특정 비율만큼 색상을 어둡게/밝게 해야 하기 때문에 색상에 대한 공통 구문 분석도 필요합니다. 이 그래디언트 수정을 통해 색상을 공통 형식으로 구문 분석해야 하는 경우 테두리 스타일: 삽입도 유용할 수 있습니다.

예를 들어, 어떤 색상(hex, rgb, rgba, hls, hlsa, 'red', 'green' 등과 같은 사전 정의된 이름)이 r, g, b 및 정의된 값을 사용하여 Color 객체로 구문 분석될 수 있는 경우 테두리 삽입도 훨씬 쉽게 구현할 수 있습니다.

공통 색상 구문 분석/표현을 재사용할 수 있고 재사용해야 한다는 데 동의했습니다. 나는 그것을 염두에두고 아마도 질문이있을 것입니다.

주말에 이것을 볼 기회가 없었습니다. 아마도 내일 시간이 있을 것입니다.

이에 대한 업데이트가 있습니까?

어, 죄송합니다. 아직 아닙니다. :/ 로컬에서 일부 테스트를 설정했지만(아직 아무 것도 구현하지 않음) 휩쓸리고 컴퓨팅 리소스가 제한적이었습니다.

기본 색상 구문 분석(지금까지 rgb, rgba, hex3 및 hex6으로 명명됨)을 추가하고 이를 사용하도록 모든 색상 사용을 변경했습니다. 그라데이션 정규식은 아직 업데이트되지 않았습니다.

https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5 참조

멋진! 이번 주말에 이 정규식을 업데이트하는 방법을 살펴보겠습니다.

@niklasvh 방금 내 브랜치(359ee8b)에서 만든 커밋을 보고 어떻게 생각하는지 알려주실 수 있나요? 내 불필요한 주석을 제거하고 곧 색상 이름에 대한 테스트를 추가할 것입니다. 하지만 다른 변경 사항도 살펴보실 수 있습니까?

Firefox에 대한 방향 구문 분석을 수정하여 이전에 올바르게 렌더링되지 않은 특정 선형 그라디언트가 이제 작동합니다. 내가 임시로 tests/lineargradients_manual.html (기본적으로 tests/cases/background/linear-gradient.html 의 복사본)에 넣은 수동 테스트를 볼 수 있습니다. 셀레늄 테스트를 실행할 수 있게 되면 다른 브라우저/버전에서 정확도가 증가하고 회귀가 없음을 확인할 수 있다고 가정합니다. 하지만 이것이 괜찮은지 확인해 주시겠습니까? 렌더 정확도 향상은 테스트한 것보다 최신 버전의 FF를 비교했을 때만 나타날 수 있다고 생각합니다. (테스트된 Firefox의 유일한 버전은 15인가요??)

흠, 잠시만요, 제가 뭔가 이상한 짓을 했을 수도 있어요. 제 홈 머신의 사각형은 이제 대부분 검은색입니다.

아, 아닙니다. 498527918c3324dce77260057bc47c280cc3324f가 문제 커밋인 것 같습니다. 제 물건은 괜찮아 보입니다. :땀_미소:

백분율이 100% 또는 0%가 아닌 경우 어떻게 됩니까?

현재로서는 임의의 백분율을 지원하지 않지만(기본값 50%로 유지), 충분히 쉽게 추가할 수 있습니다. ( 업데이트 : 임의의 백분율 지원 추가: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

내가 확실하지 않은 것은 px , em , rem , ex , cm 일 수 있는 비백분율 길이입니다. mm , in , pc , pt 등... 아직 코드에서 찾지 않았지만 이미 다양한 단위의 길이를 처리/변환하는 방법이 있습니까? (그렇지 않다면 이 기능의 일부가 되어야 합니까, 아니면 별도로 구현해야 합니까?)

절대 길이 는 구현하기 쉬워야 하지만 처음에는 px로 충분해야 한다고 생각합니다.

@niklasvh 저는 이것에 대해 살펴보고 작업할 시간이 좀 더 생겼습니다. 내가 풀 리퀘스트를 하기 전에 내 fix-firefox-gradients 브랜치를 살펴보고 댓글을 달 수 있습니까?

정규 표현식이 픽셀 길이(그라디언트 시작 위치 및 색상 중지 위치 모두)를 구문 분석할 수 있지만 올바르게 렌더링할 수 있는 지원은 여전히 ​​없다는 점에 유의해야 합니다. 절대 길이에 대한 지원을 추가하는 가장 깨끗한 방법은 그래디언트 컨테이너 생성자에 전달된 imageData 경계 정보를 포함시킨 다음 이를 백분율로 변환하는 것이라고 생각합니다. 그것은 아마도 별도의 pull 요청으로 가야 할 것입니다.

감사 해요! 이 문제를 곧 자세히 살펴보고 내가 가질 수 있는 피드백을 알려 드리겠습니다.

이에 대한 진전이 있습니까? 아직 필요합니다!

@niklasvh 가 내 지점에서 사용한 접근 방식을

:+1: 방금 이것에 부딪쳤습니다.

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)

안녕하세요 @niklasvh! #526을 수정해 주셔서 감사합니다.

내 fix-firefox-gradients 지점 을 볼 기회가 있었나요? PR을 하기 전에 내 지점을 리베이스하고 새로운 충돌을 수정하지만 PR이 여전히 환영받을 수 있는지 알려주십시오. (합리적인 시간 안에 검토할 수 있다고 생각하십니까?) 감사합니다!

@usmonster 아니요, 놓쳐서 죄송합니다. 그 수정을 하는 동안 내가 생각했던 잠재적인 문제 중 하나는 브라우저가 red 또는 blue 와 같은 명명된 색상을 각각의 rgb 또는 rgba 로 변환하지 않기로 결정한 경우입니다. transparent 하면 작동하지 않습니다. Color 모듈은 다양한 색상 변형을 모두 고려하지만, 우선 master 에서 현재 구문 분석이 수행되는 방식에 만족하지 않습니다.

명명된 색상을 처리하는 방법에 대한 아이디어가 있습니까?

@niklasvh , Color 생성자가 이미 수행한 조회 및 정규화는 내가 뭔가를 잘못 이해하지 않는 한 모든 명명된 색상을 처리하기에 충분해야 합니까?

또한 색상 및 선형 그라디언트를 구문 분석하는 데 사용되는 정규식을 수정하여 보다 강력하고 정확하며 성능을 향상시켰으므로 명명된 색상이 문제가 되지 않아야 한다고 생각합니다. 어떻게 생각하나요?

@usmonster 맞아요, 제가 언급한 https://github.com/niklasvh/html2canvas/compare/master...usmonster :fix-firefox-gradients#diff-48b5afb6985c457b9f79fcca1cfb499dR21 은 이름이 지정된 색상을 고려한 것으로 나타났습니다. 그래서 거기에는 문제가 없습니다. 그렇지 않으면 좋아 보입니다. 리베이스하고 풀 리퀘스트를 올려주시겠습니까?

괜찮아요! 나는 앞으로 며칠 동안 살펴보려고 노력할 것입니다. 저는 주말 창을 놓쳤습니다. :/

@niklasvh #708을 참조하십시오. :)

FireFox의 html2canvas.js:1454:13에서 "TypeError: colorStopMatch is null"을 받았습니다. Chrome에서는 작동합니다.

안녕하세요 @Observer999입니다! 이 문제는 종료되었습니다. 유사한 미해결 문제를 검색하거나 발생한 문제를 재현하는 페이지에 대한 링크를 사용하여 새 문제를 만드십시오. (또한 테스트한 Firefox 버전을 지정하십시오.) 코드 의 TODO 와 관련

@usmonster @niklasvh 안녕하세요 여러분, 이 문제가 종료된 것으로 알고 있지만 최신 버전의 html2canvas를 사용하고 있으며 Chrome 최신 버전에서는 동일한 오류가 발생하지만 Firefox에서는 작동합니다.

html2canvas.js: 형식: 1377 잡히지 않음(약속 중) TypeError: null의 속성 '1'을 읽을 수 없습니다.
LinearGradientContainer에서.(html2canvas.js:형식:1377)
Array.map에서 ()
새로운 LinearGradientContainer에서(html2canvas.js:formatted:1374)
ImageLoader.loadImage에서(html2canvas.js:formatted:1256)
이미지로더에서.(html2canvas.js:형식:1227)
Array.forEach에서 ()
이미지로더에서.(html2canvas.js:형식:1225)
Array.forEach에서 ()
ImageLoader.findBackgroundImage에서(html2canvas.js:formatted:1219)
html2canvas.js: 형식:2563