Html2canvas: FontAwesome 아이콘은 Firefox에서만 렌더링되지 않습니다.

jsfiddle에 예제를 설정할 수 있습니까?

http://jsfiddle.net/3ub69/

사용자 정의 아이콘 글꼴과 동일한 문제가 발생했습니다. Safari 및 Chrome에서는 작동하지만 Firefox 및 IE에서는 작동하지 않습니다.

몇 가지 파고 들었고 Firefox 26 및 IE 11에서 작동하도록 만들었습니다. 문제는 다음 줄입니다.

https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L951

왜 그런 일이 일어나는지 설명하려고 노력할 것입니다. 내 가정 중 일부가 잘못되었을 수 있으므로 자유롭게 수정하십시오.

웹킷이 아닌 브라우저에서 getComputedStyles에 의해 반환되는 객체는 객체의 숫자 속성 { 0: 'fontFamily' } 와 프로토 타입의 키 값 쌍 { fontFamily: 'fontawesome' } 설정하는 것 같습니다. Object.keys는 Object.hasOwnProperty 와 함께 for in 루프처럼 작동하기 때문에 값 쌍을 생략하므로 CSS 스타일이 복사되지 않는 것처럼 보입니다.

이 문제를 해결하려면 Object.keys() , 필터 메서드 및 forEach 메서드를 for in 루프로 바꿀 수 있습니다.

for (var prop in elStyle) {
  if (indexedProperty(prop) && prop !== 'cssText') {
    // Prevent assigning of read only CSS Rules, ex. length, parentRule
    try {
      elps.style[prop] = elStyle[prop];
    } catch (e) {
      h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
    }
  }
}

내가 prop !== 'cssText' 를 확인하는 이유는 Firefox에서는 항상 빈 문자열 (버그?)이기 때문입니다. 빈 문자열을 의사 요소에 복사하면 fontFamily가 다시 재설정되는 것 같습니다.

도움이 되었기를 바랍니다.

@Enome 이것은 매우 좋습니다. 비록 아직 테스트를하지 않았지만 "Pull Request"를 보내주세요.

감사! : +1 :

@Enome 이이 주제에 대해 pull 요청을 했습니까? 현재 그의 코드를 해결 방법으로 사용하고 있습니다.

@fpslater 풀 요청을 한 적이 없습니다. 내가 올바르게 기억하면 html-> canvas 변환 시도에서 벗어나 대신 svg를 사용하기 시작했습니다.

FontAwesome은 Chrome 및 PhantomJS와 같은 웹킷 브라우저에서도 렌더링하지 못합니다.

@kmdavis html2canvas v0.5 를 사용해 보셨습니까?

현재 html2canvas v0.5.0-alpha를 사용하고 있습니다.

문제가 복제 될 수 있거나 http://jsfiddle.net/3ub69/52/ 가 작동하지 않는 jsfiddle에 대한 간단한 예제를 제공 할 수 있습니까?

이 문제도 있습니다. html2canvas v0.5로 업그레이드하려면 어떻게하나요? 나는 이것을 묻는 어리석은 느낌이 들지만이 저장소에 그러한 분기 또는 태그가 표시되지 않습니다.

미리 감사드립니다.

추신 : gem 'rails-assets-html2canvas 및 다음 bower.json 파일과 함께 rails-assets를 통해 html2canvas를 사용하고 있습니다.

{
  "name": "My-App",
  "dependencies": {
    "html2canvas": "https://github.com/niklasvh/html2canvas"
  }
}

https://rails-assets.org/components 에서 볼 수 있듯이 rails-assets에는 <= 0.4.1 버전 만 사용할 수 있습니다. 그래서 저는 app/assets/javascripts/vendor/ 폴더에 최신 dist / html2canvas.js를 간단히 추가했고 당분간 그렇게 사용할 것입니다. 매우 유용한 라이브러리를 만들어 주셔서 감사합니다!

@sweetleon html2canvas.js 파일을 여기서 수정 한 파일로 바꿔보십시오. 그것은 나를 위해 일했습니다.

https://github.com/fpslater/fix-html2canvas-webkit-font-conversion

@sweetleon 오

나는 같은 문제를 가지고

fontawesome의 문제는 'html2canvas 1.0.0-alpha.12'버전에서 여전히 발생합니다.

어떤 해결책이 있습니까? 감사

fontawesome의 문제는 'html2canvas 1.0.0-rc.5 버전에서 여전히 발생합니다.