Html2canvas: 유니 코드 글꼴 문제

@ ramesh-git 정말 _BUG html2canvas_ 인 것 같습니다.

"fillText"로 테스트를했는데 문제가 없었지만 "html2canvas"를 사용할 때였습니다. 일부 문자가 이상한 그림 (정확히 원)으로 대체되었습니다.

지정할 수있는 유일한 빠른 수정 :

html2canvas 를 실행하기 전에 텍스트 캔버스 를 만들고 원본 텍스트와 겹치도록 배치해야합니다 ( position: absolute; 하면 원본 텍스트는 visibility: hidden; 받아야합니다.-텍스트를 span 태그 내에 넣어야 할 수 있습니다. span 태그는 숨겨져 야합니다.), onreaded 콜백을 실행할 때 캔버스 (텍스트)를 제거 (또는 숨 깁니다).

참고 : "클라이언트 측"코드를 사용하는 질문을 할 때마다 http://html2canvas.hertzen.com/ 과 같은 사이트를 사용하여 온라인 예제를 추가

fillText 예 :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
  background:#ccc;
}
canvas{
  background:#fff;
}
</style>
<canvas id="e" width="600" height="200"></canvas>
<h1 id="a1">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</h1>
<script>
    var canvas = document.getElementById("e");
    var a1 = document.getElementById("a1");

    var context = canvas.getContext("2d");
        context.fillStyle = "#000";
        context.font = "bold 16px Arial";
        context.fillText(a1.innerHTML, 10, 20);
</script>

버그 html2cavans 예 :
http://jsfiddle.net/6KvLk/

실패 이유를 발견했습니다.
renderText(el, textNode, stack) 함수에서보다 구체적으로 1186 :
: textNode.nodeValue.split(""); (이 분할은 일반 문자 용입니다)

"유니 코드 텍스트"의 경우 left , right 및 justify 값 중 하나를 사용하여 text-align (css) 속성을 추가해야합니다. justify .

참고 : letter-spacing 속성을 사용하지 마십시오.

시험:

<h1 id="a1"><span style="text-align:justify;">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</span></h1>
<script>
    var a1 = document.getElementById("a1");
    html2canvas(a1,{
        "onrendered":function(canvas){
            document.body.appendChild(canvas);
        }
    });
</script>

brcontainer 덕분입니다.
그의 / 그녀의 게시물을 보았을 때, 나는 코드 조작을 시도 할 생각이 있었고 그것은 눈에 띄지 않게 작동했습니다. 대답은 다음을 대체하는 것입니다.

textList = (! options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing (getCSS (el, "letterSpacing")))

와:

textList = (! options.letterRendering || /^(left|right|justify|auto)$/.test(textAlign) || noLetterSpacing (getCSS (el, "letterSpacing")))

(||)로 대체되는 (&&) 기호에주의하십시오.

@BENYAZ 문제 (# 289)에 대해 left|right|justify|auto 을 left|right|center|justify|auto 변경하는 것이 더 깨끗한 해결책이 아닐까요? 일부 사용 사례의 경우 해결 방법이 중단되거나 렌더링 속도가 크게 느려질 수 있습니다.

@BENYAZ 그것은 나를 위해 작동합니다 (파슈토어 및 우르두어). 감사합니다

@BENYAZ 는 페르시아어로도 작동합니다.

@BENYAZ 예 , 아랍어와 페르시아어로도 작동하는지 확인합니다.

Dari에서 작동
var textList = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data)? getWords (문자) : characters.map (함수 (문자)
&&를 ||

@BENYAZ Bangla 언어로 작업하고 있습니다. 감사

firafiul 형제 님,이 문제를 어떻게 해결 하셨나요? 라인을 변경하기 위해 파일로 이동하는 것입니까? 여러 버전의 html2canvas.js를 시도했지만 대체 할 줄을 찾지 못했습니다 (새 줄로 대체 됨).

htIbnAhmed html2canvas.js 파일에서 다음 줄을
textList = (options.letterRendering!

다음으로 교체 :

textList = (! options.letterRendering |||

** 대신에 &&. 의지.

@rafiul , 형제 님은 내 말을 이해하지 못했습니다. html2canvas.js 파일에이 줄이 없습니다 .))) "
html2canvas.js 파일을 업로드하기가 어렵습니까?

@IbnAhmed 여기에서 다운로드 : http://3rwebtech.com/html2canvas.js

firafiul , 많은 감사합니다 형제 :)

@rafiul pls는 html2canvas.js 파일을 공유 하시겠습니까? 감사

@rafiul pls는 html2canvas.js 파일을 공유 하시겠습니까? 이전 링크가 작동하지 않습니다. 감사

@hiroksarker 여기에서 다운로드하십시오, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

나와 같은 문제 .... 어떤 도움을주세요?

css 설정 : 문자 간격 : 0;
options = {letterRendering : true}

새 버전에서는 다음 줄을 변경해야합니다.

var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) &&! hasUnicode (container.node.data);

이것으로 :
var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data);

이 문제를 해결했습니다. 사용 CSS 'word-wrap: normal; '

,<div style = "word-wrap : normal;"> 귀하의 텍스트 here</div>