Html2canvas: HTML2canvas, 이미지 회전을 사용할 때 캔버스가 잘림

안녕하세요 @ amine86 , 이것은 html2canvas가 변환 된 요소의 클리핑을 처리하는 방법에 대한 문제이며, 이 풀 요청 에서 수정하기 시작했습니다. 여기 에서는 html2canvas 만 사용하여 간단한 버전의 Fiddle을 만들었 여기 에는 풀 요청이 통합되지 않은 원본 html2canvas를 사용하는 버전도

html2canvas에서 클리핑이 수행되는 방식을 다시 작성해야한다고 생각하는 까다로운 문제입니다. transform: translate() 문제를 해결할 수 있었지만 회전은 동일한 방식으로 해결할 수없는 다른 문제입니다.

안녕하세요 @eKoopmans 도움을 주셔서 대단히 감사합니다.이 문제를 해결하지 않고는 내 프로젝트에서 이것을 사용할 수 없습니다. 잘 작동하는 플러그인이나 스크립트가 html을 캔버스로 또는 html을 svg로 변환 할 수 있다는 것을 알고 계셨습니까? 라이센스 구매에 필요한 속임수라도?

당신의 도움을 주셔서 감사합니다

@ amine86 안녕하세요. SVG를 통해 HTML을 렌더링 한 다음 캔버스로 렌더링하는이 접근 방식에 운이 좋을 것입니다.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

html2canvas와 유사한 rasterizeHTML 도 있습니다. 나는 어느 쪽 접근도 많이 시도하지 않았습니다. 그들이 당신을 위해 잘 작동하는지 알려주십시오!

Hi @ekoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

0.5.0-beta4에서 이에 대한 테스트 기능을 추가합니다. 기여하고 좋은 결과를 얻기 위해 그 부분 코드가 어디에 있는지 볼 수 있습니까? 감사!

안녕하세요 @CreativForm, 그래 그것은 좋은 아이디어 @eKoopmans 당신이 우리를 도울 수있어?

안녕하세요, 어떤 테스트 기능을 설명하고 있는지 잘 모르겠습니다. 여기에서 CSS 변환 자르기를 수정하기 위해 수행 한 작업을 볼 수 있습니다.

@eKoopmans 이 문제에 대한 소식이 있으신가요?
이미 html2PDF 모듈에 수정 사항을 추가 했습니까?

감사합니다,

안녕하세요 @ amine86 , 정말 감사합니다! 안타깝게도 진행이 안 돼요 ... 드디어 코딩으로 돌아갈 시간이 생겼으니 곧해볼 수 있을지 알아 보겠습니다.

안녕하세요 @eKoopmans , 회신 해 주셔서 감사합니다. 곧 해결할 수 있기를 바랍니다. 도움을 주셔서 감사합니다.

안녕하세요 @eKoopmans ,이 회전 문제에 대한 "html2PDF"모듈의 업그레이드가 괜찮

감사,

아니요. 알림을 보내 주셔서 감사합니다. 당신은 내가 오랜 중단 끝에 방금 프로젝트로 돌아 왔다는 것을 눈치 채 셨을 것입니다. 그것은 몇 가지 답변을 보유 수, 바로 어제 v1.0.0 개발자 알파를 출시 @niklasvh처럼 보인다!

@niklasvh 당신이 읽고 있다면, 죄송합니다. html2canvas에 도움을 드리기 위해 아무것도하지 않았습니다. 잘 되길 바래요!

안녕하세요 @eKoopmans 빠른 답변에 감사드립니다.
예, 최신 릴리스를 테스트했지만 회전을 사용할 때 항상 동일한 문제가 발생하는 것으로 나타났습니다 (결과가 잘림).
이 마지막 릴리스에서는 "html2pdf"에 사용하는 "스케일"을 놓쳤습니다. 여기에 추가하기 위해 제공 했습니까?

@amineeg html2canvas 또는 html2pdf의 최신 릴리스에 대해 이야기하고 있습니까?

html2canvas의 최신 릴리스에는 dpi 가 없지만 scale 옵션이 추가되었습니다. 아직 클리핑 및 CSS 변환 문제를 해결하지 못했습니다.

@eKoopmans 예, 맞습니다. 스케일이 포함되어 있습니다.이 회전 문제가 곧 해결되기를 바랍니다.
당신의 도움을 주셔서 대단히 감사합니다.

스케일에 클리핑 문제가 있습니다.
더 큰 이미지로 크기를 조정하면 잘 작동합니다 (fe transform scale (1.4))
더 작은 이미지로 크기를 조정하면 이미지가 잘립니다 (fe transform scale (0.6)).

안녕하세요 @eKoopmans ,이 문제에 대한 소식이 있습니까? 이 회전 문제를 해결하는 데 도움을 드릴 수 있습니까?

안녕하세요 @eKoopmans @CreativForm ,

이 버그에 대한 소식이 있습니까?

감사,

안녕 @amineeg 내 편에서, 나는 @eKoopmans 가 무언가를 말하기를 기다리고 있습니다. :)

감사합니다 @CreativForm , @eKoopmans @niklasvh 이 문제에 대한 소식이 있습니까?

@eKoopmans 이 문제에 대한 움직임이 있습니까?

다음을 사용하여 창을 맨 위로 스크롤하십시오.

window.scrollTo(0,0);

이 솔루션을 직접 테스트했으며 저에게 효과가 있음을 보증 할 수 있습니다. html2canvas의 버그로 보입니다.

이유는 확실하지 않지만 요소가 완전히 화면을 벗어난 경우에도 문제가되지 않습니다. 그러나 맨 위로 스크롤되지 않는 것은 캡처 한 캔버스 이미지가 얼마나 스크롤되었는지에 따라 수직으로 오프셋 된 것처럼 보이는 원인입니다.

이렇게하면 결과 이미지가 올바른 높이를 가지지 만 위쪽에서 X 픽셀 수만큼 오프셋이 시작되어 이미지 위쪽에 빈 공간이 생깁니다.

참조 : https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut