Html2canvas: Chrome / Chromium에서 비정상적인 문자 간격

문자 간격 (이 경우 단어 간격)은 실제로 정확 해 보이지만 올바르지 않은 것은 글꼴 모음입니다. 어떤 버전의 html2canvas를 사용하고 있습니까? jsfiddle에서 문제를 복제 할 수 있습니까?

편집 : letterRendering을 사용하면 언급 한대로 다르게 렌더링됩니다.

답장을 보내 주셔서 감사합니다,

0.5.0-beta4 버전을 사용하고 있습니다.

작업 간격이 정확 해 보인다는 의미는 무엇입니까? 제가 공유 한 첫 번째 사진을 말씀하시는 건가요? 글꼴이 단어 사이에 그러한 간격을 만들까요?

내가 사용하고 있습니다 CodeMirror을 : 렌더링되는 텍스트 편집기, 구체적으로 각도 래퍼 NG2 - codemirror .

나는 여기서 아무 소용이없는 문제를 재현 해 보았다.

파이어 폭스와 크롬에서도 같은 문제를 발견했습니다. 텍스트에 문자 간격 CSS 규칙이있는 경우 각 단어 사이에 큰 간격이있는 텍스트를 렌더링합니다. 이것은 버전 0.4.1에서는 텍스트를 완벽하게 렌더링하는 데 사용되지 않았지만 의사 요소 (: before : after)가 누락되었습니다.

letter-spacing 규칙을 제거하면 모든 것이 정상으로 돌아 갑니까? 내 구성 요소의 CSS 나 사용자 정의 code-mirror 의 CSS 파일에서 사용하지 않습니다.

예 CSS에서 문자 간격 규칙을 제거하면 문제가 사라집니다. 단어 사이에 큰 공백이 없습니다. 그것은 그것을 엉망으로 만드는 글자 간격 부분의 페이지 렌더링에서 무언가입니다.

최신 정보! 저는 master의 최신 소스에서 라이브러리를 구축했으며 완벽하게 작동합니다. 지금까지 모든 것이 정말 좋아 보입니다. 이전에는 v0.5.0-beta4 릴리스를 사용해 보았습니다.

편집 : firefox에서 1 개의 문제를 발견했습니다. 배경 이미지가 텍스트로 잘리지 않습니다.
-webkit-background-clip : 텍스트;
-webkit-text-fill-color : 투명;
사용됩니다.
그래도 크롬에서는 잘 작동합니다.

내 CSS에서 letter-spacing 속성을 사용하지 않고 문제가 여전히 존재합니다. 그래도 v0.5.0-beta4 하고 있습니다.

최신 마스터 소스에서 빌드 해보십시오.

완료되었지만 문제가 해결되지 않고 디스플레이는 동일하게 유지됩니다.

https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0 으로 수정해야합니다.

문제가 다음과 같이 지속되는 것 같습니다.

요소를 렌더링 한 방법은 다음과 같습니다.

html2canvas(document.body).then(function(canvas) {      
      document.body.appendChild(canvas);
});    

귀하가 언급 한 최신 시험판 버전을 다운로드하고 이전 버전을 교체했습니다.

@christopherkade 는 letterRendering: true 옵션을 설정하면 문제를 해결합니까?

슬프게도 그렇지 않습니다. 방법은 다음과 같습니다.

let element = document.getElementById('console');
const options = {
  letterRendering: true
};

html2canvas(element, options).then(function(canvas) {      
  document.body.appendChild(canvas);

  var url = canvas.toDataURL();
  var img = '<img src="' + url + '" style="border:0;"></img>'
  var x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

저장소에 제공된 예제를 시도해도 동일한 결과가 나타납니다.

문제에 대한 해결 방법을 찾았습니다 (매우 깨끗하지 않습니다).

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

두 번째 옵션을 사용할 때 Firefox에서 발생하는 오류는 다음과 같습니다.

포착되지 않음 (약속) : [예외 ... "실행되지 않은 방법"...

같은 문제 !!

HTML 본문에서 CSS 속성 font-variant-numeric : ratioal-nums 를 제거하여 여기서 해결되었습니다.

font-variant: tabular-nums; ( in antd.css ) 제거와 유사한 문제가 수정되었습니다.

아랍어와 동일한 문제가 있습니까?

@mohafouad +1

이것에 대한 해결책을 찾았습니까? 감사합니다.

@ 2xSamurai no :(

스크린 샷을 찍으려는 div로 이동하여이 문제를 해결 한 다음 " font-variant: normal; "를 설정하여 도움이되기를 바랍니다.

전체 콘텐츠의 외부 div에 font-variant: normal !important 를 추가하면 수정되었습니다 (antd 프로젝트에서).

같은 문제가 나를 미치게 만들었다

font-variant : normal! important 작동하지 않음

@ Malarkey-Jhu와 @maaoui 의 대답이 내 문제를 해결했습니다.

내가 가진 문제 : 글꼴 패밀리가 작동하지 않았고 간격이 매우 불안정했습니다. 때때로 나는 겹치는 글자를 가질 것입니다.

내가하는 일 : 내보내기 중에 텍스트가있는 요소에서 element.style.setProperty ( 'font-variant', 'normal')을 호출하면 글꼴 모음이 제대로 표시되고 간격이 모두 불안정하지 않습니다. . 그런 다음 내보내기를 마친 후 해당 속성을 제거합니다.

위의 솔루션을 기반으로이 문제는 codemirror css 파일에서 -webkit-font-variant-ligatures 및 font-variant-ligatures 를 normal 로 변경하여 저를 위해 수정되었습니다. CodeMirror 버전 5.42.2 있습니다.