Html2canvas: Проблема со шрифтом Unicode

@ 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(""); (это разбиение для обычных символов)

Для «текста в Юникоде» вам необходимо добавить свойство text-align (css) с одним из следующих значений: left , right и 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 да, я также подтверждаю, что он работает на арабском и персидском языках.

Он работает на дари
var textList = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data)? getWords (символы): characters.map (функция (символ)
Я изменил && на ||

@BENYAZ Он работает на языке Bangla. благодаря

фирафиул Брат, как ты решил эту проблему? То есть перейти в файл для изменения строк? Я пробовал несколько версий html2canvas.js, но не нашел никаких строк для замены (которые будут заменены новыми строками).

Найдите следующую строку в файле
textList =!

Заменить:

textList = (! options.letterRendering |||

** На месте &&. Будет.

@rafiul , брат ты моих слов не понял. В файле, который я назвал html2canvas.js, нет этой строки . ))) "
Трудно загрузить файл html2canvas.js?

@IbnAhmed Загрузите отсюда: http://3rwebtech.com/html2canvas.js

фирафиул , большое спасибо братан :)

@rafiul Не

@rafiul Не

@hiroksarker загрузите его отсюда https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

такая же проблема со мной .... любая помощь, пожалуйста?

установка css: letter-spacing: 0;
options = {letterRendering: true}

в новой версии следует изменить эту строку:

var wordRendering = (! this.options.letterRendering || noLetterSpacing (контейнер)) &&! hasUnicode (container.node.data);

с этим:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (контейнер)) || ! hasUnicode (container.node.data);

Я исправил эту проблему, используя css 'word-wrap: normal; '

например ,<div style = "word-wrap: normal;"> Ваш текст here</div>